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>
  );
};

另请参阅​