<循环>
从 v2.5.0 开始提供
<Loop />
组件允许您快速布置一个动画,使其重复播放。
MyComp.tsxtsx
constMyComp = () => {return (<Loop durationInFrames ={50}times ={2}><BlueSquare /></Loop >);};
MyComp.tsxtsx
constMyComp = () => {return (<Loop durationInFrames ={50}times ={2}><BlueSquare /></Loop >);};
note
好好知道:您可以相互嵌套循环,它们将级联。
API
Loop 组件是一个高阶组件,除了它的子元素之外,还接受以下 props:
durationInFrames
循环的每一次迭代应该持续多少帧。
times
可选
循环内容的次数。默认情况下为 Infinity
。
layout
可选
要么是 "absolute-fill"
(默认)要么是 "none"
。
默认情况下,您的内容将被绝对定位。
如果您想要禁用布局副作用,请传递 layout="none"
。
style
v3.3.4
可选
要应用于容器的 CSS 样式。如果 layout
设置为 none
,则没有容器,不允许设置此样式。
示例
以下所有示例都基于以下蓝色正方形的动画:
tsx
constMyComp = () => {return <BlueSquare />;};
tsx
constMyComp = () => {return <BlueSquare />;};
连续循环
tsx
constMyComp = () => {return (<Loop durationInFrames ={50}><BlueSquare /></Loop >);};
tsx
constMyComp = () => {return (<Loop durationInFrames ={50}><BlueSquare /></Loop >);};
固定次数循环
tsx
constMyComp = () => {return (<Loop durationInFrames ={50}times ={2}><BlueSquare /></Loop >);};
tsx
constMyComp = () => {return (<Loop durationInFrames ={50}times ={2}><BlueSquare /></Loop >);};
嵌套循环
tsx
constMyComp = () => {return (<Loop durationInFrames ={75}><Loop durationInFrames ={30}><BlueSquare /></Loop ></Loop >);};
tsx
constMyComp = () => {return (<Loop durationInFrames ={75}><Loop durationInFrames ={30}><BlueSquare /></Loop ></Loop >);};
useLoop()
v4.0.142
子组件可以使用 Loop.useLoop()
钩子来获取有关当前循环的信息。
您应该检查 null
,如果组件不在循环中,则为此情况。
如果在循环中,则返回一个具有两个属性的对象:
durationInFrames
:以帧为单位传递给<Loop />
组件的循环持续时间。iteration
:循环的当前迭代,从 0 开始。
tsx
importReact from "react";import {Loop ,useCurrentFrame } from "remotion";constLoopedVideo :React .FC = () => {return (<Loop durationInFrames ={50}times ={3}name ="MyLoop"><Child /></Loop >);};constChild = () => {constframe =useCurrentFrame (); // 75constloop =Loop .useLoop ();if (loop === null) {// Not inside a loop} else {console .log (loop .durationInFrames ); // 50console .log (loop .iteration ); // 1}return <div >{frame }</div >;};
tsx
importReact from "react";import {Loop ,useCurrentFrame } from "remotion";constLoopedVideo :React .FC = () => {return (<Loop durationInFrames ={50}times ={3}name ="MyLoop"><Child /></Loop >);};constChild = () => {constframe =useCurrentFrame (); // 75constloop =Loop .useLoop ();if (loop === null) {// Not inside a loop} else {console .log (loop .durationInFrames ); // 50console .log (loop .iteration ); // 1}return <div >{frame }</div >;};