Skip to main content

<Sequence>

通过使用序列，您可以在视频中对组件或动画的部分进行时间偏移显示。

MyTrailer.tsx
tsx
const MyTrailer = () => {
  return (
    <>
      <Sequence durationInFrames={30}>
        <Intro />
      </Sequence>
      <Sequence from={30} durationInFrames={30}>
        <Clip />
      </Sequence>
      <Sequence from={60}>
        <Outro />
      </Sequence>
    </>
  );
};
MyTrailer.tsx
tsx
const MyTrailer = () => {
  return (
    <>
      <Sequence durationInFrames={30}>
        <Intro />
      </Sequence>
      <Sequence from={30} durationInFrames={30}>
        <Clip />
      </Sequence>
      <Sequence from={60}>
        <Outro />
      </Sequence>
    </>
  );
};
<Intro>

将在帧0至29之间显示。
<Clip>

将在帧30至59之间显示。
<Outro>

将在帧60之后一直显示到合成结束。

所有调用useCurrentFrame()的<Sequence>子元素将收到一个由from偏移的值。

MyTrailer.tsx
tsx
import { Sequence, useCurrentFrame } from "remotion";
 
const Intro = () => <div>{useCurrentFrame()}</div>;
 
const MyTrailer = () => {
  return (
    <>
      <Intro />
      <Sequence from={30}>
        <Intro />
      </Sequence>
    </>
  );
};
MyTrailer.tsx
tsx
import { Sequence, useCurrentFrame } from "remotion";
 
const Intro = () => <div>{useCurrentFrame()}</div>;
 
const MyTrailer = () => {
  return (
    <>
      <Intro />
      <Sequence from={30}>
        <Intro />
      </Sequence>
    </>
  );
};

在帧0时，这将呈现 <div>0</div>。

在帧30时，这将呈现 <div>30</div><div>0</div>。

使用durationInFrames属性，您可以定义<Sequence>的子元素应该挂载多长时间。

默认情况下，<Sequence>的子元素将包装在一个<AbsoluteFill>组件中。如果您不希望这种行为，请将layout="none"作为属性添加。

级联​

您可以相互嵌套序列，它们将级联。
例如，在帧30开始的序列内部的序列，将使其子元素从帧90开始。

示例​

以下所有示例都基于以下蓝色正方形的动画：

0
0:00 / 0:05

MyVideo.tsx
tsx
const MyVideo = () => {
  return <BlueSquare />;
};
MyVideo.tsx
tsx
const MyVideo = () => {
  return <BlueSquare />;
};

延迟​

如果您想延迟内容，可以将其包裹在 <br/> <Sequence from={30}> 中。

0:00 / 0:05

delay.tsx
tsx
const MyVideo = () => {
  return (
    <Sequence from={30}>
      <BlueSquare />
    </Sequence>
  );
};
delay.tsx
tsx
const MyVideo = () => {
  return (
    <Sequence from={30}>
      <BlueSquare />
    </Sequence>
  );
};

裁剪结尾​

将您的组件包裹在 <Sequence> 中，并使用有限的 durationInFrames 属性使其在持续时间结束后卸载。

0
0:00 / 0:05

trim-end.tsx
tsx
const ClipExample: React.FC = () => {
  return (
    <Sequence durationInFrames={45}>
      <BlueSquare />
    </Sequence>
  );
};
trim-end.tsx
tsx
const ClipExample: React.FC = () => {
  return (
    <Sequence durationInFrames={45}>
      <BlueSquare />
    </Sequence>
  );
};

裁剪开头​

将正方形包裹在带有负 from 值的 <Sequence> 中，以裁剪内容的开头。
通过向后移动时间，当内容出现时，动画已经进行了 15 帧。

15
0:00 / 0:05

trim-start.tsx
tsx
const TrimStartExample: React.FC = () => {
  return (
    <Sequence from={-15}>
      <BlueSquare />
    </Sequence>
  );
};
trim-start.tsx
tsx
const TrimStartExample: React.FC = () => {
  return (
    <Sequence from={-15}>
      <BlueSquare />
    </Sequence>
  );
};

裁剪和延迟​

将内容包裹在两个 <Sequence> 中。
对于内部的 <Sequence>，传递负的起始值 from={-15} 以裁剪掉内容的前 15 帧。
对于外部的 <Sequence>，我们传递正值 from={30}，然后将其向前移动 30 帧。

0:00 / 0:05

trim-and-delay.tsx
tsx
const TrimAndDelayExample: React.FC = () => {
  return (
    <Sequence from={30}>
      <Sequence from={-15}>
        <BlueSquare />
      </Sequence>
    </Sequence>
  );
};
trim-and-delay.tsx
tsx
const TrimAndDelayExample: React.FC = () => {
  return (
    <Sequence from={30}>
      <Sequence from={-15}>
        <BlueSquare />
      </Sequence>
    </Sequence>
  );
};

依次播放序列​

查看 <Series /> 辅助组件，它可以帮助您计算使序列依次播放的标记。

属性​

Sequence 组件是一个高阶组件，除了 children 外，还接受以下属性：

from​

可选的（从 v3.2.36 开始，之前版本中为 必需的）

其子元素应该假定视频开始的帧数。当序列在 frame 时，其子元素在帧 0 处。 从 v3.2.36 开始，此属性将是可选的；默认情况下为 0。

durationInFrames​

可选的

序列应该显示多少帧。如果子元素不在显示时间范围内，则会卸载。默认情况下为 Infinity，以避免限制序列的持续时间。

heightv4.0.80​

_optional_​

为序列提供特定的 style={{height: height}} 样式，并覆盖子组件中由 useVideoConfig() 钩子返回的 height。适用于包含为特定高度设计的组件。

widthv4.0.80​

optional

为序列提供特定的 style={{width: width}} 样式，并覆盖子组件中由 useVideoConfig() 钩子返回的 width。适用于包含为特定宽度设计的组件。

name​

optional

您可以为序列指定一个名称，在 Remotion Studio 时间轴中显示为序列的标签。此属性纯粹是为了帮助您在时间轴中跟踪序列。

layout​

optional

可以是 "absolute-fill" (默认) 或 "none"。默认情况下，您的序列将被绝对定位，因此它们将重叠在一起。如果您希望退出此设置并自行处理布局，请传递 layout="none"。自 v1.4 起可用。

stylev3.0.27​

optional

要应用于容器的 CSS 样式。如果 layout 设置为 none，则没有容器，不允许设置此样式。

classNamev3.3.45​

optional

要应用于容器的类名。如果 layout 设置为 none，则没有容器，不允许设置此样式。

premountForv4.0.140​

optional

为一组帧预挂载序列。

showInTimelinev4.0.110​

optional

如果设置为 false，则不会在 Studio 的时间轴中显示该轨道。
默认情况下，子 <Sequence> 会显示，除非 showInTimeline 也设置为 false。
此行为自 v4.0.110 版本稳定，之前行为不同，但未记录此属性。

添加引用​

您可以从版本 v3.2.13 开始为 <Sequence> 添加 React 引用。如果使用 TypeScript，您需要使用 HTMLDivElement 对其进行类型化。

tsx
const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <Sequence from={10} ref={ref}>
      {content}
    </Sequence>
  );
};
tsx
const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <Sequence from={10} ref={ref}>
      {content}
    </Sequence>
  );
};

@remotion/three的注意事项​

默认情况下，<Sequence> 将返回一个 <div> 组件，这在 <ThreeCanvas> 内是不允许的。通过向 <Sequence> 传递 layout="none" 来避免错误。例如：<Sequence layout="none">。

参见​