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

<Trail> 和 <CameraMotionBlur> 组件会操作包含当前时间的 React 上下文。
这意味着如果您在运动模糊组件之外使用 useCurrentFrame() 钩子，运动模糊效果将无法正常工作。

❌ 错误 - 在 CameraMotionBlur 之外使用 useCurrentFrame()
tsx
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>
  );
};

❌ 错误 - 在 CameraMotionBlur 之外使用 useCurrentFrame()
tsx
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>
  );
};

您可以通过将动画提取到单独的组件中来解决此问题：

✅ 正确 - 在子组件中使用 useCurrentFrame()
tsx
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>
  );
};

✅ 正确 - 在子组件中使用 useCurrentFrame()
tsx
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>
  );
};

参见​

参见