Remotion生成视频存在闪烁问题：求原因分析及解决方案

常见成因及对应解决办法 #

1. 动态时长计算的不确定性 #

你的Composition中durationInFrames用了三元表达式取两个值的较大者，首先注意到videoDuretion是拼写错误（应为videoDuration），如果这个值未正确定义或在渲染过程中发生变化，会导致Composition的时长不稳定，进而引发帧跳变或重复渲染，造成闪烁。

修复步骤:

• 修正拼写错误：videoDuretion → videoDuration
• 提前计算并固定最终时长，避免在Composition中动态判断：

  const finalDuration = Math.max(DURATION_IN_FRAMES, videoDuration);
  
  return (
    <>
      <Composition
        id="Story"
        component={Story}
        durationInFrames={finalDuration}
        fps={FRAME_PER_SECOND}
        width={VIDEO_RESOLTION_WIDTH}
        height={VIDEO_RESOLTION_HEIGHT}
        defaultProps={{
          messageIds: '',
          apiResponse
        }}
      />
    </>
  );
  

• 验证finalDuration是否和Story组件内部的动画逻辑匹配，防止组件在超出自身预期的帧范围内出现异常渲染。

2. 组件渲染不稳定 #

如果Story组件存在不必要的重渲染，或者apiResponse作为props传递时引用频繁变化（比如每次渲染都生成新对象），会导致每帧渲染的内容不一致，直接引发闪烁。

修复步骤:

• 用React.memo包裹Story组件，减少无意义的重渲染：

  import { memo } from 'react';
  
  const Story = memo((props) => {
    // 你的组件逻辑
  });
  

• 对apiResponse进行memo化处理，确保props引用稳定：

  import { useMemo } from 'react';
  
  const memoizedApiResponse = useMemo(() => apiResponse, [apiResponse]);
  
  // 在Composition的defaultProps中使用memoized版本
  defaultProps={{
    messageIds: '',
    apiResponse: memoizedApiResponse
  }}
  

• 检查Story内部是否有依赖随机值、未稳定化状态的逻辑，比如没用到useMemo/useEffect的动态计算，这类逻辑会让每帧渲染结果不一样。

3. 像素对齐与动画帧率不同步 #

元素使用非整数的位置、尺寸（比如top: 10.5px）会触发子像素渲染，视频渲染时容易出现闪烁；另外，动画逻辑没和Remotion的帧率同步，也会导致帧跳跃。

修复步骤:

• 确保所有元素的位置、尺寸都用整数像素值：

  .animated-element {
    position: absolute;
    top: 10px; /* 别用10.5px这种非整数 */
    left: 20px;
    width: 100px;
  }
  

• 用Remotion的useCurrentFrame()钩子同步动画，基于当前帧计算状态，而非时间戳：

  import { useCurrentFrame } from 'remotion';
  
  const Story = () => {
    const frame = useCurrentFrame();
    const progress = frame / FRAME_PER_SECOND;
    
    // 基于frame计算动画参数，确保和帧率对齐
    const translateX = progress * 100;
    
    return <div style={{ transform: `translateX(${translateX}px)` }}>...</div>;
  };
  

4. 渲染编码参数问题 #

默认的Remotion渲染设置可能在某些场景下出现编码异常，比如帧率不匹配、关键帧间隔过大等，导致最终视频闪烁。

修复步骤:

• 在渲染命令中指定明确的编码参数，比如设置恒定帧率（CFR）：

  "scripts": {
    "start": "remotion preview src/index.tsx",
    "build": "remotion render src/index.tsx Story results/$(date \"%Y-%m-%d_%H-%M-%S\").mp4 --codec h264 --crf 23 --preset medium"
  }
  

• 尝试启用GPU加速渲染（如果你的环境支持）：

  "build": "remotion render src/index.tsx Story results/$(date \"%Y-%m-%d_%H-%M-%S\").mp4 --enable-gpu"
  

• 先检查预览模式是否闪烁：如果预览正常仅渲染后出问题，基本是编码参数的问题；如果预览也闪，那问题肯定在组件逻辑里。

内容的提问来源于stack exchange，提问作者Shubham Verma