<Sequence>
通过使用序列,您可以在视频中对组件或动画的部分进行时间偏移显示。
MyTrailer.tsxtsx
constMyTrailer = () => {return (<><Sequence durationInFrames ={30}><Intro /></Sequence ><Sequence from ={30}durationInFrames ={30}><Clip /></Sequence ><Sequence from ={60}><Outro /></Sequence ></>);};
MyTrailer.tsxtsx
constMyTrailer = () => {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.tsxtsx
import {Sequence ,useCurrentFrame } from "remotion";constIntro = () => <div >{useCurrentFrame ()}</div >;constMyTrailer = () => {return (<><Intro /><Sequence from ={30}><Intro /></Sequence ></>);};
MyTrailer.tsxtsx
import {Sequence ,useCurrentFrame } from "remotion";constIntro = () => <div >{useCurrentFrame ()}</div >;constMyTrailer = () => {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开始。
示例
以下所有示例都基于以下蓝色正方形的动画:
MyVideo.tsxtsx
constMyVideo = () => {return <BlueSquare />;};
MyVideo.tsxtsx
constMyVideo = () => {return <BlueSquare />;};
延迟
如果您想延迟内容,可以将其包裹在 <br/>
<Sequence from={30}>
中。
delay.tsxtsx
constMyVideo = () => {return (<Sequence from ={30}><BlueSquare /></Sequence >);};
delay.tsxtsx
constMyVideo = () => {return (<Sequence from ={30}><BlueSquare /></Sequence >);};
裁剪结尾
将您的组件包裹在 <Sequence>
中,并使用有限的 durationInFrames
属性使其在持续时间结束后卸载。
trim-end.tsxtsx
constClipExample :React .FC = () => {return (<Sequence durationInFrames ={45}><BlueSquare /></Sequence >);};
trim-end.tsxtsx
constClipExample :React .FC = () => {return (<Sequence durationInFrames ={45}><BlueSquare /></Sequence >);};
裁剪开头
将正方形包裹在带有负 from
值的 <Sequence>
中,以裁剪内容的开头。
通过向后移动时间,当内容出现时,动画已经进行了 15 帧。
trim-start.tsxtsx
const TrimStartExample: React.FC = () => {return (<Sequence from={-15}><BlueSquare /></Sequence>);};
trim-start.tsxtsx
const TrimStartExample: React.FC = () => {return (<Sequence from={-15}><BlueSquare /></Sequence>);};
裁剪和延迟
将内容包裹在两个 <Sequence>
中。
对于内部的 <Sequence>
,传递负的起始值 from={-15}
以裁剪掉内容的前 15 帧。
对于外部的 <Sequence>
,我们传递正值 from={30}
,然后将其向前移动 30 帧。
trim-and-delay.tsxtsx
constTrimAndDelayExample :React .FC = () => {return (<Sequence from ={30}><Sequence from ={-15}><BlueSquare /></Sequence ></Sequence >);};
trim-and-delay.tsxtsx
constTrimAndDelayExample :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
,以避免限制序列的持续时间。
height
v4.0.80
_optional_
为序列提供特定的 style={{height: height}}
样式,并覆盖子组件中由 useVideoConfig()
钩子返回的 height
。适用于包含为特定高度设计的组件。
width
v4.0.80
optional
为序列提供特定的 style={{width: width}}
样式,并覆盖子组件中由 useVideoConfig()
钩子返回的 width
。适用于包含为特定宽度设计的组件。
name
optional
您可以为序列指定一个名称,在 Remotion Studio 时间轴中显示为序列的标签。此属性纯粹是为了帮助您在时间轴中跟踪序列。
layout
optional
可以是 "absolute-fill"
(默认) 或 "none"
。默认情况下,您的序列将被绝对定位,因此它们将重叠在一起。如果您希望退出此设置并自行处理布局,请传递 layout="none"
。自 v1.4 起可用。
style
v3.0.27
optional
要应用于容器的 CSS 样式。如果 layout
设置为 none
,则没有容器,不允许设置此样式。
className
v3.3.45
optional
要应用于容器的类名。如果 layout
设置为 none
,则没有容 器,不允许设置此样式。
premountFor
v4.0.140
optional
为一组帧预挂载序列。
showInTimeline
v4.0.110
optional
如果设置为 false
,则不会在 Studio 的时间轴中显示该轨道。
默认情况下,子 <Sequence>
会显示,除非 showInTimeline
也设置为 false。
此行为自 v4.0.110 版本稳定,之前行为不同,但未记录此属性。
添加引用
您可以从版本 v3.2.13
开始为 <Sequence>
添加 React 引用。如果使用 TypeScript,您需要使用 HTMLDivElement
对其进行类型化。
tsx
constMyComp = () => {constref =useRef <HTMLDivElement >(null);return (<Sequence from ={10}ref ={ref }>{content }</Sequence >);};
tsx
constMyComp = () => {constref =useRef <HTMLDivElement >(null);return (<Sequence from ={10}ref ={ref }>{content }</Sequence >);};
@remotion/three
的注意事项
默认情况下,<Sequence>
将返回一个 <div>
组件,这在 <ThreeCanvas>
内是不允许的。通过向 <Sequence>
传递 layout="none"
来避免错误。例如:<Sequence layout="none">
。