Skip to main content

<Loop>

v2.5.0

<Loop /> 组件允许你快速布局一个动画，使其重复播放。

🌐 The <Loop /> component allows you to quickly lay out an animation so it repeats itself.

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

值得知道：你可以在循环中嵌套其他循环，它们会层叠执行。

应用编程接口​

🌐 API

Loop 组件是一个高阶组件，除了它的子元素外，还接受以下属性：

🌐 The Loop component is a high order component and accepts, besides it's children, the following props:

durationInFrames​

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

🌐 How many frames one iteration of the loop should be long.

times?​

循环内容的次数。默认值：Infinity。

🌐 How many times to loop the content. Default: Infinity.

layout?​

要么是 "absolute-fill"，要么是 "none"。默认值："absolute-fill"。
默认情况下，你的内容将是绝对定位的。
如果你想禁用布局副作用，请传入 layout="none"。

🌐 Either "absolute-fill" or "none". Default: "absolute-fill".
By default, your content will be absolutely positioned.
If you would like to disable layout side effects, pass layout="none".

style?v3.3.4​

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

🌐 CSS styles to be applied to the container. If layout is set to none, there is no container and setting this style is not allowed.

示例​

🌐 Examples

下面的所有示例都基于以下蓝色方块的动画：

🌐 All the examples below are based on the following animation of a blue square:


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

连续循环​

🌐 Continuous loop


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

固定计数循环​

🌐 Fixed count loop


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

嵌套循环​

🌐 Nested loop


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

useLoop()v4.0.142​

子组件可以使用 Loop.useLoop() 钩子来获取有关当前循环的信息。你应该检查 null，如果组件不在循环内的情况下就是这种情况。

🌐 A child component can use the Loop.useLoop() hook to get information about the current loop.
You should check for null, which is the case if the component is not inside a loop.

如果在循环内部，返回一个具有两个属性的对象：

🌐 If inside a loop, an object with two properties is returned:

  • durationInFrames：作为传递给 <Loop /> 组件的参数，循环的持续时间以帧为单位。
  • iteration：循环的当前迭代，从 0 开始。
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>;
};

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on