Skip to main content

<循环>

从 v2.5.0 开始提供

<Loop /> 组件允许您快速布置一个动画,使其重复播放。

MyComp.tsx
tsx
const MyComp = () => {
return (
<Loop durationInFrames={50} times={2}>
<BlueSquare />
</Loop>
);
};
MyComp.tsx
tsx
const MyComp = () => {
return (
<Loop durationInFrames={50} times={2}>
<BlueSquare />
</Loop>
);
};
note

好好知道:您可以相互嵌套循环,它们将级联。

API

Loop 组件是一个高阶组件,除了它的子元素之外,还接受以下 props:

durationInFrames

循环的每一次迭代应该持续多少帧。

times

可选

循环内容的次数。默认情况下为 Infinity

layout

可选

要么是 "absolute-fill"默认)要么是 "none"
默认情况下,您的内容将被绝对定位。
如果您想要禁用布局副作用,请传递 layout="none"

stylev3.3.4

可选

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

示例

以下所有示例都基于以下蓝色正方形的动画:

0
0:00 / 0:05

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

连续循环

0
0:00 / 0:05

tsx
const MyComp = () => {
return (
<Loop durationInFrames={50}>
<BlueSquare />
</Loop>
);
};
tsx
const MyComp = () => {
return (
<Loop durationInFrames={50}>
<BlueSquare />
</Loop>
);
};

固定次数循环

0
0:00 / 0:05

tsx
const MyComp = () => {
return (
<Loop durationInFrames={50} times={2}>
<BlueSquare />
</Loop>
);
};
tsx
const MyComp = () => {
return (
<Loop durationInFrames={50} times={2}>
<BlueSquare />
</Loop>
);
};

嵌套循环

0
0:00 / 0:05

tsx
const MyComp = () => {
return (
<Loop durationInFrames={75}>
<Loop durationInFrames={30}>
<BlueSquare />
</Loop>
</Loop>
);
};
tsx
const MyComp = () => {
return (
<Loop durationInFrames={75}>
<Loop durationInFrames={30}>
<BlueSquare />
</Loop>
</Loop>
);
};

useLoop()v4.0.142

子组件可以使用 Loop.useLoop() 钩子来获取有关当前循环的信息。
您应该检查 null,如果组件不在循环中,则为此情况。

如果在循环中,则返回一个具有两个属性的对象:

  • durationInFrames:以帧为单位传递给 <Loop /> 组件的循环持续时间。
  • iteration:循环的当前迭代,从 0 开始。
tsx
import React from "react";
import { Loop, useCurrentFrame } from "remotion";
 
const LoopedVideo: React.FC = () => {
return (
<Loop durationInFrames={50} times={3} name="MyLoop">
<Child />
</Loop>
);
};
 
const Child = () => {
const frame = useCurrentFrame(); // 75
const loop = Loop.useLoop();
 
if (loop === null) {
// Not inside a loop
} else {
console.log(loop.durationInFrames); // 50
console.log(loop.iteration); // 1
}
 
return <div>{frame}</div>;
};
tsx
import React from "react";
import { Loop, useCurrentFrame } from "remotion";
 
const LoopedVideo: React.FC = () => {
return (
<Loop durationInFrames={50} times={3} name="MyLoop">
<Child />
</Loop>
);
};
 
const Child = () => {
const frame = useCurrentFrame(); // 75
const loop = Loop.useLoop();
 
if (loop === null) {
// Not inside a loop
} else {
console.log(loop.durationInFrames); // 50
console.log(loop.iteration); // 1
}
 
return <div>{frame}</div>;
};

另请参阅