<MotionBlur> 和 <Trail>的常见错误

<Trail> 和 <CameraMotionBlur> 组件操作保存当前时间的 React 上下文。这意味着，如果你在运动模糊组件之外使用 useCurrentFrame() Hook，运动模糊效果将无法工作。

🌐 The <Trail> and <CameraMotionBlur> components manipulate the React context that holds the current time.
This means that the motion blur effect doesn't work if you use the useCurrentFrame() hook outside of a motion blur component.

❌ Wrong - useCurrentFrame() outside of CameraMotionBlur
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {CameraMotionBlur} from '@remotion/motion-blur';

export const MyComp = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill>
      <CameraMotionBlur>
        <AbsoluteFill
          style={{
            backgroundColor: 'red',
            justifyContent: 'center',
            alignItems: 'center',
            color: 'white',
            fontSize: frame,
          }}
        >
          A
        </AbsoluteFill>
      </CameraMotionBlur>
    </AbsoluteFill>
  );
};

你可以通过将动画提取到一个独立的组件中来解决此问题：

🌐 You can fix this by extracting the animation into a separate component:

✅ Correct - useCurrentFrame() inside the child component
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {CameraMotionBlur} from '@remotion/motion-blur';

const A: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        fontSize: frame,
      }}
    >
      A
    </AbsoluteFill>
  );
};

export const MyComp = () => {
  return (
    <AbsoluteFill>
      <CameraMotionBlur>
        <A />
      </CameraMotionBlur>
    </AbsoluteFill>
  );
};

另请参阅

🌐 See also

• <Trail>
• <CameraMotionBlur>