Skip to main content

如何组合组件？

假设您有两个组件，One 和 Two：

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() 函数来渲染它们。

参见​