Skip to main content

<Trail>

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

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

为使此技术有效，子元素必须绝对定位，以便可以创建许多图层而不影响布局。
您可以使用 <AbsoluteFill> 组件来绝对定位内容。

API​

将您的内容包装在 <Trail> 中，并添加以下属性。

layers​

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

lagInFrames​

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

trailOpacity​

之前称为 blurOpacity

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

示例用法​

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

演示​

Still

A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A

Animation

A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A

另请参阅​