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>;
};

另请参阅​