remotion-motion-graphics

Remotion 动态图形

Remotion 会将 React 组件渲染为视频。useCurrentFrame() 会告诉组件当前正在绘制哪一帧；所有动画都是这个数字的纯函数。没有时间轴，也没有关键帧界面——因此图形可以由数据驱动、重复使用，并以真正的 alpha 通道渲染。

你已经知道如何编写不错的动态代码。这项技能关注的是三件容易被跳过、却很容易出错的事：在润色之前找到真正的错误、验证你构建的内容，以及那些会悄无声息地失败的陷阱。

先诊断，再装饰

当图形“感觉平淡”或“看起来像 PowerPoint”时，先找出缺陷，再开始添加弹簧动画。用户对感觉的抱怨，往往是他们能看到却说不出名字的真实错误。

一个真实案例：一个统计数字在递增后“就停在那里了”。实际问题是使用了 interpolate(frame, [0, 60], [0, 12400])，却没有设置 clamp——Remotion 默认会外推，因此数字并没有停在 12.400，而是在最后一帧升到了 30.793。这个统计数字是错的。如果再加上弹跳入场效果，最终交付的就会是一幅漂亮却显示错误数字的图形。

所以：阅读现有代码，检查它在第 0 帧、中间帧和 durationInFrames - 1 帧实际计算出的结果，并修复问题。然后再让它变漂亮。references/traps.md 列出了那些在源代码中看起来没问题的错误——修改动画代码前先阅读，完成后再对照检查自己的作品。

验证你构建的内容

渲染整个片段后才发现它有问题，是最慢的做法。先检查一张静帧：

npx remotion still <CompId> out/check.png --frame=45

几秒钟，而不是几分钟。检查关键帧——入场中段、重点时刻、停留中段、退场中段——并且要查看图像本身，不要只确认文件存在。这一步最容易被跳过，却最能抓出令人尴尬的问题：元素始终没有入场、辉光从第 0 帧起就一直亮着、文字被容器裁切。

对于 alpha 通道，Studio 的棋盘格就是证明。请先在那里确认，再渲染出编辑器会拒绝的 ProRes。

如果工具链确实无法运行，请在总结中直言说明——“从未执行过”是重要信息，不是脚注。

制作检查清单

默认应用；如果有不清楚的地方，原因详见 references/polish.md。

• 完整的入场 → 停留 → 退场。 第 0 帧时屏幕上什么都没有，最后一帧时也没有任何元素还在移动。将退场预留在时长之内。这是业余作品最明显的标志。
• 绝不使用线性动画。 优先使用 spring()（预备动作、过冲、稳定）；需要使用 interpolate 时则使用 Easing。
• 错开时间，在 30fps 下相差 3–5 帧——入场和退场都要错开，并保持相同顺序。
• 停留期间保持微动： 轻柔浮动、缓慢的辉光脉动、掠过的光泽。让人感受到，而不是刻意注意到。
• 重点时刻要有强调效果： 缩放弹出、辉光、圆环、声音。
• 使用几何光效，而不是剪贴画。 闪光、扩张的圆环、细光线、辉光。Emoji 和粒子剪贴画一眼就显得廉价。使用一个点缀效果，不要三个。
• 可读性。 标题安全边距为 5–10%；在视频素材上的文字后方加遮罩或阴影；设置一个醒目的视觉焦点；长字符串应缩小并换行，而不是溢出。
• 时间安排应符合内容。 每条短句留出约 1 秒阅读时间；遵守要求的时长。
• 由数据驱动。 将文字、颜色、数字、图像作为 props，并配上 zod schema 和 defaultProps，这样就能在 Studio 中调整样式，而不必修改代码。
• 尺寸相对于画布计算（useVideoConfig()），并用 sec() 设置时间，这样切换到 4K 或竖屏裁切也不会破坏布局。

声音

无声图形是最常见的短板——声音大约占感知质感的一半，而且除非有人坚持，否则永远不会添加。入场时轻柔的呼啸声、关键操作时的点击声、成功时的提示音、退场时的掠过声。

<Sequence from={sec(0.5)}>
  <Audio src={staticFile('audio/whoosh.mp3')} volume={0.6} />
</Sequence>

从源文件中裁掉开头的静音——如果文件开头有 80ms 的无声片段，无论 Sequence 放在哪里，声音都会晚 80ms；这是动画看起来正确、音频却「感觉不对」的常见原因。对于打字或计数，在整个持续时间内播放一段连贯、轻柔的声音；每个字符或数字都播放同一个音效会很刺耳。

如果没有 public/audio/，不要悄悄创建它——告诉用户声音是下一项最值得做的升级，并表示他们放入文件后可以帮忙接入。

模式

没有 Remotion 项目（没有 remotion 依赖）→ 脚手架：references/scaffold.md。

项目已存在，要创建新图形 → 在 src/compositions/ 中编写组合，导出组件、schema 和 defaultProps，并在 Root.tsx 中注册一个唯一 id。每种模式的可用代码：references/patterns.md。

「感觉很平」 → 先进行诊断（见上文），然后参阅 references/polish.md，按优先级执行升级步骤。

方向尚未确定时，快速尝试 2–3 种风格通常比猜测更好——把时间花在打磨错误的方向上，是这里代价最高的失误。

渲染和导出

# Full scene → MP4
npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=18

# Overlay with real alpha → Premiere / FCP / DaVinci / AE
npx remotion render <CompId> out/<name>.mov --codec=prores \
  --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png

# Overlay → PNG sequence (CapCut and friends)
npx remotion render <CompId> out/<name>/frame-%04d.png --image-format=png

# Live preview
npm run studio

参考资料

• references/traps.md — 静默失败。编写动画代码前请阅读。
• references/patterns.md — 可用代码：入场／退场、弹簧、交错、透明度、音频、字体、自动适配、场景。
• references/polish.md — 按收益排序的平面图形升级步骤。
• references/scaffold.md — 从零创建新项目。