如何组合组件?
假设您有两个组件,One
和 Two
:
Root.tsxtsx
importReact from "react";import {Composition } from "remotion";import {One } from "./One";import {Two } from "./Two";export constRoot :React .FC = () => {return (<><Composition id ="One"component ={One }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/><Composition id ="Two"component ={Two }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/></>);};
Root.tsxtsx
importReact from "react";import {Composition } from "remotion";import {One } from "./One";import {Two } from "./Two";export constRoot :React .FC = () => {return (<><Composition id ="One"component ={One }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/><Composition id ="Two"component ={Two }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/></>);};
要将它们组合起来,创建另一个组件,我们称之为 Main
:
Main.tsxtsx
importReact from "react";import {Series } from "remotion";import {One } from "./One";import {Two } from "./Two";export constMain :React .FC = () => {return (<Series ><Series .Sequence durationInFrames ={120}><One /></Series .Sequence ><Series .Sequence durationInFrames ={120}><Two /></Series .Sequence ></Series >);};
Main.tsxtsx
importReact from "react";import {Series } from "remotion";import {One } from "./One";import {Two } from "./Two";export constMain :React .FC = () => {return (<Series ><Series .Sequence durationInFrames ={120}><One /></Series .Sequence ><Series .Sequence durationInFrames ={120}><Two /></Series .Sequence ></Series >);};
然后,在您的 Root
组件中,添加一个 Main
组合:
Root.tsxtsx
importReact from "react";import {Composition } from "remotion";import {One } from "./One";import {Two } from "./Two";import {Main } from "./Main";export constRoot :React .FC = () => {return (<><Composition id ="One"component ={One }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/><Composition id ="Two"component ={Two }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/><Composition id ="Main"component ={Main }width ={1080}height ={1080}fps ={30}durationInFrames ={240}/></>);};
Root.tsxtsx
importReact from "react";import {Composition } from "remotion";import {One } from "./One";import {Two } from "./Two";import {Main } from "./Main";export constRoot :React .FC = () => {return (<><Composition id ="One"component ={One }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/><Composition id ="Two"component ={Two }width ={1080}height ={1080}fps ={30}durationInFrames ={120}/><Composition id ="Main"component ={Main }width ={1080}height ={1080}fps ={30}durationInFrames ={240}/></>);};
如何避免硬编码持续时间?
您可以在组件旁边定义变量:
tsx
export constONE_DURATION = 120;export constTWO_DURATION = 120;export constMAIN_DURATION =ONE_DURATION +TWO_DURATION ;
tsx
export constONE_DURATION = 120;export constTWO_DURATION = 120;export constMAIN_DURATION =ONE_DURATION +TWO_DURATION ;
然后将这些变量传递给 <Composition>
和 <Series.Sequence>
。
如何在组件之间进行过渡?
您可以使用 <TransitionSeries>
。如果使用它,您的主要组合将变短,因为在一段时间内,两个组合都被挂载。
减去过渡的持续时间以获得正确的时间。
这种方法如何扩展?
随着添加更多场景,请考虑:
- 使用
calculateMetadata()
来根据其属性计算组合的持续时间。 - 创建一个场景数组,并使用 JavaScript 的
.map()
函数来渲染它们。