Skip to main content

<Sequence>

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

🌐 By using a sequence, you can time-shift the display of your components or parts of your animation in the video.

MyTrailer.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 移位的值。

🌐 All children of a <Sequence> that call useCurrentFrame() will receive a value that is shifted by from.

MyTrailer.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> 的子元素应该挂载多长时间。

🌐 Using the durationInFrames prop, you can define for how long the children of a <Sequence> should be mounted.

默认情况下，<Sequence> 的子元素会被封装在 <AbsoluteFill> 组件中。如果你不想要这种行为，可以将 layout="none" 作为属性添加。

🌐 By default, the children of a <Sequence> are wrapped in an <AbsoluteFill> component. If you don't want this behavior, add layout="none" as a prop.

层叠​

🌐 Cascading

你可以将序列嵌套在彼此之中，它们将会级联。
例如，位于从第60帧开始的序列内的一个从第30帧开始的序列，它的子序列将从第90帧开始。

🌐 You can nest sequences within each other and they will cascade.
For example, a sequence that starts at frame 60 which is inside a sequence that starts at frame 30 will have it's children start at frame 90.

示例​

🌐 Examples

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

🌐 All the examples below are based on the following animation of a blue square:


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

延迟​

🌐 Delay

如果你想将内容延迟，比如延迟30帧，你可以将其封装在
<Sequence from={30}>中。


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

修剪末端​

🌐 Trim end

将你的组件封装在一个具有有限 durationInFrames 属性的 <Sequence> 中，以便在持续时间结束后卸载它。

🌐 Wrap your component in a <Sequence> with a finite durationInFrames prop to make it unmount after the duration has passed.


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

修剪开始​

🌐 Trim start

将方块 <Sequence> 的 from 值设置为负数，以裁剪内容的开头。
通过将时间向后移动，当内容出现时，动画已经推进了 15 帧。

🌐 Wrap the square in <Sequence> with a negative from value to trim the beginning of the content.
By shifting the time backwards, the animation has already progressed by 15 frames when the content appears.


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

修剪与延迟​

🌐 Trim and delay

将内容封装在两个 <Sequence> 中。
对内部的那个，传入一个负的起始值 from={-15} 来去掉内容的前 15 帧。
对外部的那个，我们传入一个正值 from={30} 然后将其向前移动 30 帧。

🌐 Wrap the content in two <Sequence>'s.
To the inner one, pass a negative start value from={-15} to trim away the first 15 frames of the content.
To the outer one we pass a positive value from={30} to then shift it forwards by 30 frames.


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

按顺序播放序列​

🌐 Play Sequences sequentially

请参见 <Series /> 辅助组件，它可以帮助你计算使序列依次播放的标记。

🌐 See the <Series /> helper component, which helps you calculate markup that makes sequences play after each other.

属性​

🌐 Props

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

🌐 The Sequence component is a high order component and accepts, besides children, the following props:

from?​

(v3.2.36 可选，之前版本为_必需_)

子元素应该假设视频从哪个帧开始。当序列处于 frame 时，其子元素处于帧 0。 从 v3.2.36 开始，此属性将为可选；默认值为 0。

🌐 At which frame it's children should assume the video starts. When the sequence is at frame, it's children are at frame 0. From v3.2.36 onwards, this prop will be optional; by default, it will be 0.

durationInFrames?​

序列应显示多少帧。如果子组件不在显示的时间范围内，它们将被卸载。默认情况下为 Infinity，以避免限制序列的持续时间。

🌐 For how many frames the sequence should be displayed. Children are unmounted if they are not within the time range of display. By default it will be Infinity to avoid limit the duration of the sequence.

height?v4.0.80​

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

🌐 Gives the sequence a specific style={{height: height}} style and overrides height that is returned by the useVideoConfig() hook in child components. Useful for including a component that was designed for a specific height.

width?v4.0.80​

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

🌐 Gives the sequence a specific style={{width: width}} style and overrides width that is returned by the useVideoConfig() hook in child components. Useful for including a component that was designed for a specific width.

name?​

你可以给你的序列起一个名字，它将显示在 Remotion Studio 时间线上的序列标签中。此属性纯粹是为了帮助你在时间线上跟踪序列。

🌐 You can give your sequence a name and it will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of sequences in the timeline.

layout?​

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

🌐 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". Available since v1.4.

style?v3.0.27​

要应用于容器的 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 对一组固定帧数的序列进行预装。 从 v5.0 起，默认值从 0 改为 fps（1 秒）。

postmountFor?v4.0.340​

与 premountFor 相同，但用于序列结束之后。
仅在你预期用户会频繁在时间线上向后查找并且希望避免此行为的闪烁时使用。

🌐 Same as premountFor, but for after the sequence has ended.
Use this only if you expect the user to frequently seek backwards in the timeline and you want to avoid flickers for this behavior.

styleWhilePremounted?v4.0.252​

在序列预安装时应用于容器的 CSS 样式。
style 仍然生效，但 styleWhilePremounted 可以覆盖属性。

🌐 CSS styles to be applied to the container while the sequence is premounted.
The style is still applied, but styleWhilePremounted can override properties.

showInTimeline?v4.0.110​

如果设置为 false，该轨道将在 Studio 的时间线上不显示。
子 <Sequence> 默认会显示，除非 showInTimeline 也被设置为 false。
此行为自 v4.0.110 起稳定，之前行为不同，但此属性未记录。

🌐 If set to false, the track will not be shown in the Studio's timeline.
Child <Sequence>'s will show by default, unless showInTimeline is also set to false.
This behavior is stable as of v4.0.110, previously the behavior was different, but this prop not documented.

添加引用​

🌐 Adding a ref

从 v3.2.13 版本开始，你可以向 <Sequence> 添加一个 React ref。如果你使用 TypeScript，你需要用 HTMLDivElement 来类型化它：

🌐 You can add a React ref to an <Sequence> from version v3.2.13 on. If you use TypeScript, you need to type it with HTMLDivElement:

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

@remotion/three 的注意​

🌐 Note for @remotion/three

默认情况下，<Sequence> 会返回一个 <div> 组件，而该组件不允许放在 <ThreeCanvas> 内。
通过将 layout="none" 传递给 <Sequence> 可以避免错误。例如：<Sequence layout="none">。

🌐 A <Sequence> by default will return a <div> component which is not allowed inside a <ThreeCanvas>.
Avoid an error by passing layout="none" to <Sequence>. Example: <Sequence layout="none">.

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on