Skip to main content

<系列>

从 v.2.3.1 开始提供

使用这个组件,您可以轻松地将应该在另一个之后按顺序播放的场景拼接在一起。

示例

代码

src/Example.tsx
tsx
import { Series } from "remotion";
 
export const Example: React.FC = () => {
return (
<Series>
<Series.Sequence durationInFrames={40}>
<Square color={"#3498db"} />
</Series.Sequence>
<Series.Sequence durationInFrames={20}>
<Square color={"#5ff332"} />
</Series.Sequence>
<Series.Sequence durationInFrames={70}>
<Square color={"#fdc321"} />
</Series.Sequence>
</Series>
);
};
src/Example.tsx
tsx
import { Series } from "remotion";
 
export const Example: React.FC = () => {
return (
<Series>
<Series.Sequence durationInFrames={40}>
<Square color={"#3498db"} />
</Series.Sequence>
<Series.Sequence durationInFrames={20}>
<Square color={"#5ff332"} />
</Series.Sequence>
<Series.Sequence durationInFrames={70}>
<Square color={"#fdc321"} />
</Series.Sequence>
</Series>
);
};

结果

0
0:00 / 0:05

API

<Series /> 组件不接受任何 props,只能包含一系列 <Series.Sequence /> 实例。<Series.Sequence /> 组件接受以下 props:

这个组件是一个高阶组件,除了它的子元素之外,还接受以下 props:

durationInFrames

序列应该显示多少帧。如果子元素不在显示时间范围内,则会被卸载。

只有最后一个 <Series.Sequence /> 实例允许持续时间为 Infinity,所有之前的实例必须是正整数。

offset

可选

传递一个正数以延迟序列的开始。传递一个负数以提前开始序列,并将序列与前一个重叠。

偏移量不适用于之前的序列,但是之后的序列也将被移动。

示例 1:传递 10 以延迟序列 10 帧,并在其前创建一个空白空间 10 帧。
示例 2:传递 -10 以提前开始序列,并在前一个序列上叠加 10 帧。

layout

可选

要么 "absolute-fill"默认),要么 "none"。默认情况下,您的序列将被绝对定位,因此它们将互相叠加。如果您想退出并自行处理布局,请传递 layout="none"

stylev3.3.4

可选

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

classNamev3.3.45

可选

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

premountForv4.0.140

可选

预挂载序列的一组帧。

refv3.3.4

可选

您可以为<Series.Sequence>添加React ref。如果您使用TypeScript,需要用HTMLDivElement进行类型标注:

src/Example.tsx
tsx
import React, { useRef } from "react";
import { Series } from "remotion";
 
export const Example: React.FC = () => {
const first = useRef<HTMLDivElement>(null);
const second = useRef<HTMLDivElement>(null);
 
return (
<Series>
<Series.Sequence durationInFrames={40} ref={first}>
<Square color={"#3498db"} />
</Series.Sequence>
<Series.Sequence durationInFrames={20} ref={second}>
<Square color={"#5ff332"} />
</Series.Sequence>
<Series.Sequence durationInFrames={70}>
<Square color={"#fdc321"} />
</Series.Sequence>
</Series>
);
};
src/Example.tsx
tsx
import React, { useRef } from "react";
import { Series } from "remotion";
 
export const Example: React.FC = () => {
const first = useRef<HTMLDivElement>(null);
const second = useRef<HTMLDivElement>(null);
 
return (
<Series>
<Series.Sequence durationInFrames={40} ref={first}>
<Square color={"#3498db"} />
</Series.Sequence>
<Series.Sequence durationInFrames={20} ref={second}>
<Square color={"#5ff332"} />
</Series.Sequence>
<Series.Sequence durationInFrames={70}>
<Square color={"#fdc321"} />
</Series.Sequence>
</Series>
);
};

另请参阅