<CameraMotionBlur>

v3.2.39

<CameraMotionBlur> 产生的运动模糊看起来自然，类似于摄影机所产生的效果。

🌐 The <CameraMotionBlur> produces natural looking motion blur similar to what would be produced by a film camera.

为了使这种技术生效，子元素必须使用绝对定位，这样可以创建多个层而不影响布局。你可以使用 <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.

note

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

应用编程接口

🌐 API

将你的内容封装在 <CameraMotionBlur> 中，并且可以选择性地添加以下属性。

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

`shutterAngle?`

控制模糊的程度。默认值：180。

🌐 Controls the amount of blur. Default: 180.

较低的数值会导致模糊度较低，而较高的数值会导致模糊度较高。

🌐 A lower value will result in less blur and a higher value will result in more.

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

🌐 The blur also depends on the frames per second (FPS). Higher FPS will naturally have less blur and lower FPS will have more blur.

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

🌐 In movies and TV common values are (FPS/shutter angle):

24 帧/秒 / 180° 或 90°
25 帧/秒 / 180° 或 90°
30 帧/秒 / 180° 或 90°
50 帧/秒 / 180° 或 90°
60 帧/秒 / 180° 或 90°

Details

什么是“快门角度”？

许多模拟胶片相机使用带有部分切口的旋转圆盘来阻挡或让光线通过以曝光模拟胶片。零度等于完全阻挡光线，三百六十度则相当于完全不阻挡任何光线。

电影行业中最常用的数值是90度和180度。这些数值与你在大多数电影中所经历的相同。

🌐 The most common values used in the film industry are 90 and 180 degrees. These values are the same as what you've experienced in most movies.

在此阅读更多内容：维基百科上的旋转盘快门

🌐 Read more here: Rotary disc shutter on Wikipedia

`samples?`

最终图片是样本的平均值。默认值：10。当值为 10 时，组件将渲染十个具有不同时间偏移的帧，并将它们合成为最终图片。

🌐 The final image is an average of the samples. Default: 10. For a value of 10 the component will render ten frames with different time offsets and combine them into a final image.

caution

较高的数值会产生更高质量的模糊效果，但会以图片质量为代价。见下方示例。

推荐值：5-10。

🌐 Recommended values: 5-10.

示例用法

🌐 Example usage

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