用途:为 Remotion 视频提供关键帧动画引擎,适合逐帧精确动画、interpolate 曲线、交错(stagger)模式、进出场编排与文字动画。核心思路是把关键帧当作姿态契约:可见状态、主体身份连续、帧确定性、像素可验证。
主要能力:支持 spring() 与 interpolate() 两种动画原语;提供入场、退场、多段数值过渡、颜色渐变、缩放弹跳、文字逐词显现、SVG strokeDashoffset 描边、clipPath 形状揭示以及 CSS perspective 3D 深度场景等配方。
使用方式:所有值须由 useCurrentFrame() 同步推导;spring 使用 spring({frame, fps, config}),入场用 spring({frame: frame - delay, fps, config}) 并以 Math.max(0, frame - delay) 避免负帧;interpolate 需设置 extrapolateLeft/Right 为 'clamp'。交错模式用索引延迟 frame - i * delay。完成后用 npx remotion studio 拖动时间轴,检查首帧、全部姿态与末帧,失败则修正源关键帧再渲染。
限制:渲染关键动画禁止使用 Date.now()、performance.now()、未播种的 Math.random()、CSS transition/animation、requestAnimationFrame、setTimeout/setInterval 以及 useState/useEffect 驱动视觉属性。优先使用合成器通道(transform、opacity、borderRadius、clipPath、SVG strokeDashoffset),避免 top/left/width/height 等触发布局的通道。文字状态至少保持 10 帧、图标至少 6 帧;末帧属于动画的一部分,除非要求否则不要回到静止或黑屏。