<系列>
从 v.2.3.1 开始提供
使用这个组件,您可以轻松地将应该在另一个之后按顺序播放的场景拼接在一起。
示例
代码
src/Example.tsxtsx
import {Series } from "remotion";export constExample :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.tsxtsx
import {Series } from "remotion";export constExample :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 >);};
结果
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"
。
style
v3.3.4
可选
要应用于容器的 CSS 样式。如果 layout
设置为 none
,则没有容器,不允许设置此样式。
className
v3.3.45
可选
要应用于容器的类名。如果layout
设置为none
,则没有容器,不允许设置此样式。
premountFor
v4.0.140
可选
预挂载序列的一组帧。
ref
v3.3.4
可选
您可以为<Series.Sequence>
添加React ref。如果您使用TypeScript,需要用HTMLDivElement
进行类型标注:
src/Example.tsxtsx
importReact , {useRef } from "react";import {Series } from "remotion";export constExample :React .FC = () => {constfirst =useRef <HTMLDivElement >(null);constsecond =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.tsxtsx
importReact , {useRef } from "react";import {Series } from "remotion";export constExample :React .FC = () => {constfirst =useRef <HTMLDivElement >(null);constsecond =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 >);};