Skip to main content

如何组合组件?

假设您有两个组件,OneTwo

Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { One } from "./One";
import { Two } from "./Two";
 
export const Root: 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.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { One } from "./One";
import { Two } from "./Two";
 
export const Root: 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.tsx
tsx
import React from "react";
import { Series } from "remotion";
import { One } from "./One";
import { Two } from "./Two";
 
export const Main: React.FC = () => {
return (
<Series>
<Series.Sequence durationInFrames={120}>
<One />
</Series.Sequence>
<Series.Sequence durationInFrames={120}>
<Two />
</Series.Sequence>
</Series>
);
};
Main.tsx
tsx
import React from "react";
import { Series } from "remotion";
import { One } from "./One";
import { Two } from "./Two";
 
export const Main: React.FC = () => {
return (
<Series>
<Series.Sequence durationInFrames={120}>
<One />
</Series.Sequence>
<Series.Sequence durationInFrames={120}>
<Two />
</Series.Sequence>
</Series>
);
};

然后,在您的 Root 组件中,添加一个 Main 组合:

Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { One } from "./One";
import { Two } from "./Two";
import { Main } from "./Main";
 
export const Root: 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.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { One } from "./One";
import { Two } from "./Two";
import { Main } from "./Main";
 
export const Root: 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 const ONE_DURATION = 120;
export const TWO_DURATION = 120;
export const MAIN_DURATION = ONE_DURATION + TWO_DURATION;
tsx
export const ONE_DURATION = 120;
export const TWO_DURATION = 120;
export const MAIN_DURATION = ONE_DURATION + TWO_DURATION;

然后将这些变量传递给 <Composition><Series.Sequence>

如何在组件之间进行过渡?

您可以使用 <TransitionSeries>。如果使用它,您的主要组合将变短,因为在一段时间内,两个组合都被挂载。
减去过渡的持续时间以获得正确的时间。

这种方法如何扩展?

随着添加更多场景,请考虑:

  • 使用 calculateMetadata() 来根据其属性计算组合的持续时间。
  • 创建一个场景数组,并使用 JavaScript 的 .map() 函数来渲染它们。

参见