Skip to main content

我如何合并作品？

假设你有两部作品，One和Two：

🌐 Say you have two compositions, One and Two:

Root.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：

🌐 To combine them, create another component, let's call it Main:

Main.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 组合：

🌐 Then, in your Root component, add a Main composition:

Root.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}
      />
    </>
  );
};

我如何避免硬编码持续时间？​

🌐 How do I avoid hardcoding the duration?

你可以在组件旁边定义变量：

🌐 You can define variables alongside your components:

export const ONE_DURATION = 120;
export const TWO_DURATION = 120;
export const MAIN_DURATION = ONE_DURATION + TWO_DURATION;

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

🌐 And then pass the variables them to <Composition> and <Series.Sequence>.

我如何在作品之间过渡？​

🌐 How do I transition between compositions?

你可以使用 <TransitionSeries>。如果你使用它，你的主要作品会变短，因为在一段时间内，两个作品是同时装载的。
减去过渡时间以获得正确的时间。

🌐 You can use <TransitionSeries>. If you use it, your main composition will get shorter because for a period of time, both compositions are mounted.
Subtract the duration of the transition to get a correct timing.

这个如何扩展？​

🌐 How does this scale?

随着更多场景的添加，请考虑：

🌐 As more scenes are added, consider:

  • 使用 calculateMetadata() 根据其属性计算作品的时长。
  • 创建一个场景数组，并使用 JavaScript 的 .map() 函数来渲染它们。

另请参阅​

🌐 See also

Last updated on