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">

参见