<CameraMotionBlur>

从 v3.2.39 开始可用

<CameraMotionBlur> 产生类似胶片相机产生的自然运动模糊效果。

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

note

这种技术对颜色具有破坏性。建议将 samples 属性保持尽可能低，并仔细检查输出是否具有可接受的质量。

API

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

`shutterAngle`

可选 - 默认值：180

控制模糊程度。

较低的值会导致较少的模糊，较高的值会导致更多的模糊。

模糊还取决于每秒帧数（FPS）。更高的 FPS 自然会有较少的模糊，而较低的 FPS 会有更多的模糊。

在电影和电视中，常见的值是（FPS/快门角度）：

24 fps / 180° 或 90°
25 fps / 180° 或 90°
30 fps / 180° 或 90°
50 fps / 180° 或 90°
60 fps / 180° 或 90°

Details

什么是“快门角度”？

许多模拟胶片相机使用带有部分切割的旋转圆盘来阻挡或透过光线以曝光模拟胶片。零度等于完全阻挡光线，而 360 度等同于完全不阻挡任何光线。

电影行业中最常用的值是 90 和 180 度。这些值与您在大多数电影中体验到的相同。

在这里阅读更多：维基百科上的旋转圆盘快门

`samples`

可选 - 默认值：10

最终图像是样本的平均值。对于值为10的情况，组件将渲染十个具有不同时间偏移的帧，并将它们合并成最终图像。

caution

较高的数值将以图像质量为代价产生更高质量的模糊效果。请参见下面的示例。

推荐数值：5-10。

示例用法

tsx
import {CameraMotionBlur} from '@remotion/motion-blur';
import {AbsoluteFill} from 'remotion';
 
export const MyComposition = () => {
  return (
    <CameraMotionBlur shutterAngle={180} samples={10}>
      <AbsoluteFill
        style={{
          backgroundColor: 'white',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <RainbowSquare />
      </AbsoluteFill>
    </CameraMotionBlur>
  );
};

tsx
import {CameraMotionBlur} from '@remotion/motion-blur';
import {AbsoluteFill} from 'remotion';
 
export const MyComposition = () => {
  return (
    <CameraMotionBlur shutterAngle={180} samples={10}>
      <AbsoluteFill
        style={{
          backgroundColor: 'white',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <RainbowSquare />
      </AbsoluteFill>
    </CameraMotionBlur>
  );
};