Skip to main content

<Series>

v2.3.1

使用此组件，你可以轻松地将应该按顺序播放的场景拼接在一起。

🌐 Using this component, you can easily stitch together scenes that should play sequentially after another.

示例​

🌐 Example

代码​

🌐 Code

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

结果​

🌐 Result

应用编程接口​

🌐 API

<Series /> 组件不接受任何属性。它只能包含 <Series.Sequence /> 实例的列表。
<Series.Sequence /> 组件接受以下属性：

🌐 The <Series /> component takes no props. It may only contain a list of <Series.Sequence /> instances.
A <Series.Sequence /> component accepts the following props:

durationInFrames?​

序列应显示多少帧。如果子项不在显示的时间范围内，它们将被卸载。

🌐 For how many frames the sequence should be displayed. Children are unmounted if they are not within the time range of display.

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

🌐 Only the last <Series.Sequence /> instance is allowed to have Infinity as a duration, all previous one must have a positive integer.

offset?​

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

🌐 Pass a positive number to delay the beginning of the sequence. Pass a negative number to start the sequence earlier, and to overlay the sequence with the one that comes before.

偏移不适用于前面的序列，但后面的序列也会被移动。

🌐 The offset does not apply to sequences that come before, but the sequences that come after it will also be shifted.

示例 1：传入 10 可将序列延迟 10 帧，并在其前创建 10 帧的空白。
示例 2：传入 -10 可提前开始序列，并将序列在前一个序列上覆盖 10 帧。

layout?​

要么是 "absolute-fill" (默认) 要么是 "none"。默认情况下，你的序列将被绝对定位，因此它们会互相覆盖。如果你想选择退出并自己处理布局，请传递 layout="none"。

🌐 Either "absolute-fill" (default) or "none" By default, your sequences will be absolutely positioned, so they will overlay each other. If you would like to opt out of it and handle layouting yourself, pass layout="none".

style?v3.3.4​

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

🌐 CSS styles to be applied to the container. If layout is set to none, there is no container and setting this style is not allowed.

className?v3.3.45​

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

🌐 A class name to be applied to the container. If layout is set to none, there is no container and setting this style is not allowed.

premountFor?v4.0.140​

Premount 为固定数量的帧预先排列序列。

ref?v3.3.4​

你可以向 <Series.Sequence> 添加一个 React ref。如果你使用 TypeScript，你需要用 HTMLDivElement 来进行类型定义：

🌐 You can add a React ref to a <Series.Sequence>. If you use TypeScript, you need to type it with HTMLDivElement:

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

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on