SuperAPI AI 工具集

remotion-best-practices

设计与创作

查看项目

更新于 10-16 08:01

技能介绍

用途:在编写或修改 Remotion 代码时使用,提供每个 Remotion 项目所需的基础模式,从动画原语到渲染设置。

主要能力与规则:所有动画必须使用 useCurrentFrame(),禁止 CSS 过渡、CSS 动画和 Tailwind 动画类,因为 Remotion 逐帧独立渲染。优先用 spring() 实现自然运动,而非带缓动的 interpolate()。时间以秒书写再乘以 useVideoConfig() 的 fps 换算为帧,硬编码帧号需注释对应秒数。插值必须用 extrapolateLeft: 'clamp'、extrapolateRight: 'clamp' 限制范围。标准设计为 1920x1080、30fps。

使用方式:通过 interpolate 映射帧到输出值,用 spring 配置(damping、mass、stiffness)控制运动质感,用 delay 或 frame 相减实现错峰入场。合成结构使用 Composition、Folder、Series(顺序播放)与 Sequence(精确帧位置与重叠)。场景模板包含时间轴标记与弹簧入场。渲染命令如 npx remotion render src/index.ts CompositionName out/video-prores.mov --codec prores --prores-profile 4444 --jpeg-quality 100 --width 1920 --height 1080 --concurrency 16;H.264 用 --codec h264 --crf 10。素材使用 Img、OffthreadVideo、Audio、staticFile 与 loadFont。

适用场景:视频动画、场景编排、缩略图 Still、动态元数据、错峰列表、打字机、脉冲、交叉淡入、计数器、旋转元素等。

限制与反模式:不要用 CSS 过渡、Tailwind 动画类、requestAnimationFrame、setTimeout/setInterval、useState 管理动画状态、未限制的插值、巨型单体场景组件,或按 1080p 设计却渲染 4K。渲染崩溃可降低 --concurrency;空白帧需检查延迟相减后 frame < 0 的情况。