Skip to main content

<Trail>

从 v3.2.39 可用，之前称为 <MotionBlur>

🌐 available from v3.2.39, previously called <MotionBlur>

<Trail> 组件会复制它的子元素，并为每一层添加时间偏移，以创建拖尾效果。

🌐 The <Trail> component duplicates it's children and adds a time offset to each layer in order to create a trail effect.

为了使这种技术生效，子元素必须使用绝对定位，这样可以创建多个层而不影响布局。 你可以使用 <AbsoluteFill> 组件来绝对定位内容。

🌐 For this technique to work, the children must be absolutely positioned so many layers can be created without influencing the layout.
You can use the <AbsoluteFill> component to absolutely position content.

应用编程接口​

🌐 API

将你的内容封装在 <Trail> 中，并另外添加以下属性。

🌐 Wrap your content in <Trail> and add the following props in addition.

layers​

在内容下方添加了多少层。必须是整数

🌐 How many layers are added below the content. Must be an integer

lagInFrames​

每一层落后上一层多少帧。也可以是浮点数。

🌐 How many frames each layer is lagging behind the last one. Can also a floating point number.

trailOpacity​

以前称为 blurOpacity

🌐 previously called blurOpacity

图层的最高不透明度。最低不透明度为0，中间的图层会进行插值。

🌐 The highest opacity of a layer. The lowest opacity is 0 and layers intbetween get interpolated.

示例用法​

🌐 Example usage

import {Trail} from '@remotion/motion-blur';
import {AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <Trail layers={50} lagInFrames={0.1} trailOpacity={1}>
      <AbsoluteFill
        style={{
          backgroundColor: 'white',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <BlueSquare />
      </AbsoluteFill>
    </Trail>
  );
};

演示​

🌐 Demo


另请参阅​

🌐 See also

Last updated on