开发笔记
一段动画，先让人看懂
整理参考片学习与代码视频制作中的教训：从阅读顺序、动作路径到转场和音乐重音，以及一份可复用的制作提示词。
画面里有标题、图形、字幕和音乐，并不意味着一段视频已经讲清楚了。
此前的代码视频制作记录里，最反复的问题不是缺少某种特效，而是几种关系没有安排好：文字与图形同时抢读，动作和路径对不上，两幕之间主体突然重置，音乐响起时最显眼的动作却已经发生。
这篇将参考片学习与 AGI 视频的制作复盘合在一起。重点是后续还能用的方法，具体影片的配色、音乐与数值不作为通用模板。
开头先发生一件事
解释一个概念，可以先让观众做一次判断，或者看到一个变化，再给它命名。
之前的信息论参考片以熟悉句子的留空开始，让人先感到“容易猜到”和“难以猜到”的差别。值得学习的是这种理解顺序：先有可参与的事件，再解释事件。
同样的做法可以迁移到教程：先演示一次失败的搜索，展示哪里没有找到结果，再说明匹配规则。不能只有一屏术语，紧接着就要求观众接受结论。
写脚本时，先补全这条线：
条件是什么 → 谁发生变化 → 变化产生什么结果 → 观众因此知道什么。
结尾再回来回答开头的问题。开头的物件可以再次出现，但它的状态或含义应当有变化。
字幕、标签和大字，各做一件事
一帧里同时出现标题、长解释、标签、字幕和复杂动作，观众很难知道先看哪里。
可以先做一份分工：
| 层次 | 负责什么 | 常见问题 |
|---|---|---|
| 画面主字 | 当前结论、问题或关键词 | 与字幕逐字重复，一起抢读 |
| 图形标签 | 指认对象、数值或状态 | 太小、离对象太远、压在线条上 |
| 底部字幕 | 推进解释与叙事 | 显现过慢，刚读到一半就切走 |
| 主体动作 | 演示关系和变化 | 只有装饰运动，没有解释作用 |
信息挤了，先删、拆或延长阅读窗口。把所有字缩小，通常只是把拥挤藏起来。
需要读文字时，镜头和主要布局可以安静下来。动作在关键处发生，停顿也就有了作用。
动作先确定姿势、时间和路径
学习十二项动画法则之后，一个有用的制作顺序是：先确定关键姿势、时间疏密和路径，再添加形变、跟随与余势。
以一次落球为例，先确定离地、下落、接触、回弹和稳定的位置及时间。球接触地面后才压扁，形变围绕接触点发生；不能一边压缩，一边把接触位置推走。
几个容易混在一起的决定，可以分开处理：
- 关键姿势：起点、转折、接触和终点分别是什么形态？
- 时间疏密：等时间间隔里，物体移动多少距离？
- 路径：是抛物、摆动，还是沿一条给定曲线行进？
- 跟随与余势：主体停止后，哪些附属部分还会动，何时收住？
- 夸张：放大哪个重音，其他部分怎样退后？
十二项法则不必每镜都用。科学图示尤其需要克制：形变和表演应服务解释，不能为了生动增加未经证明的含义。
路径与残影来自同一份数据
如果主体沿曲线运动，残影、方向和已经走过的轨迹也应由这条曲线计算。分别手画一条“差不多”的轨迹，很容易出现标记偏离线条的问题。
下面只是确定性状态的简化示意，不是一套完整的动画组件：
type Point = { x: number; y: number };
function positionAt(frame: number): Point {
const t = Math.max(0, Math.min(1, frame / 60));
return { x: 120 + 600 * t, y: 420 - 180 * 4 * t * (1 - t) };
}
const frame = 30;
const body = positionAt(frame);
const trail = [1, 2, 3].map(index => positionAt(frame - index * 3));在按帧制作的视频里，给定同一帧应得到同一状态，方便定位和复核。这也是当前代码视频采用 Remotion 时保留的工作方式。这里用时间进度直接计算位置，没有做弧长匀速处理，也不代表物理重力模拟。
转场先问：什么可以留下来
同一主体跨镜头出现时，优先保留它的当前位置、尺度与状态，再移动或改变形态。不要刚点亮十个格子，下一幕又重建一组空格子，让观众重新认一次。
不同主体之间则可以把背景、前景和字幕拆开交接：背景平稳变化，前景短暂接续，文字独立收放。两套清晰的长文长时间叠化，容易产生双影；每次先全空，再慢慢淡入，也会打断理解。
此前四支参考片里，可以提炼出这些配方：
| 配方 | 变化顺序 | 适合解释什么 |
|---|---|---|
| 实物退后，结构显现 | 先认识物件，再降低实物对比，逐步出现结构 | 装置与工作原理 |
| 字形承接 | 先建立大字，再让纹理或下一幕通过字形出现 | 年份、篇章、关键词 |
| 状态递进 | 问题、操作、结果依次发生，数字和图形同步 | 搜索、概率、反馈 |
| 同场景改变状态 | 保留主体与空间，改变光线、天气或对象状态 | 前后对照、情绪转折 |
| 局部动，其余稳 | 先建立比较，只让需要解释的一侧变化 | 随机与有序、成功与失败 |
| 重访开场 | 回到开头的对象，展示新的结果 | 回答问题、结束叙事 |
这些是从可见画面归纳的迁移方法，不代表原作者实际采用了某种软件或实现技术。
卡点对齐的是动作重音
“在鼓点时结束动画”和“让动作贴住鼓点”，并不总是一回事。
AGI 视频的旧版记录里，一段 0.52 秒动作被安排在节拍处完成，但使用快速起步的缓动，最大速度实际出现在节拍之前约 520 毫秒。时间线看似对齐，最明显的运动却提前了。
更有用的安排是先确定接触、点亮、转向或速度峰值发生在哪里，再倒推动画起点：
动画开始时刻 = 目标重音时刻 - 重音在动画内部的时间偏移一次动作可以有短预备、重音和收势。字幕和辅助标签不必都抢同一个鼓点，复杂解释也要保留阅读时间。
原项目记录中的 21 个节奏位置，在 30fps 量化后相对所选音频瞬态的最大误差为 16 毫秒。这个数字只说明所选时序的偏差；当时没有主观试听，不能据此声称听起来已经卡得很好。本次整理也没有重新测量这段成片。
一份视频制作提示词
这份模板用于提出任务。制作之前仍应补充实际主题、素材与参考；它不包含音乐、图片或字体的授权。
请制作一支代码视频，主题是：[主题]。
观众：[人群及已有知识]。
开头要提出的问题：[问题]。
结尾必须回答：[结论]。
已有素材与参考：[来源]。
画幅、时长目标和交付格式：[要求]。
先检查现有工程、当前源码、素材与最新成片，保留已确认的决定。
拆解参考的叙事、信息顺序、字形、构图、动作和转场。
区分实际看见的效果与推测的实现，不虚构字体、BPM或精确剪点。
先给出两到三个有明显差异的视觉方案和可查看的预览，
等我选定后再正式制作。方案不能只是换颜色。
每个段落写清条件、动作、结果与观众获得的理解。
主字、标签、字幕分工，读字期间保持画面稳定。
重点动作先确定关键姿势、时间疏密和路径，再加形变与余势。
转场保留可继承的主体或状态，检查空档、双影与突然重置。
音乐对齐实际动作重音，不能只对齐动画结束时间。
先完成最难的短段，局部成立后再制作全片。
使用 Remotion 按帧驱动，除非另有要求，不添加 AI 配音。
从最终导出的文件独立检查，并区分解码、抽帧、播放与试听。
交付时报告实际验证范围，不把技术成功写成审美通过。最后检查成片本身
源码里的位置、时间与计数正确，只是第一步。最终编码文件还可能出现裁切、字形、音轨或边界问题。
复核至少分清三种证据：
- 技术检查：文件能否解码，规格、时长和音轨是否符合要求。
- 画面检查：抽样与重点帧里的文字、几何、计数和转场是否正确。
- 观看与试听：正常速度下能否读完，动作是否连贯，音画重音是否贴合。
三个层面互相补充。全片解码通过，不能替代正常速度观看；时间误差小，也不能替代试听。
参考与整理范围
这篇基于 2026 年 10 月 19–20 日保存的参考片学习记录、设计规范和 AGI 制作复盘整理。参考片当时采用分段抽看与局部连续画面观察，没有完成所有原片的连续完整审看、逐帧解码或主观试听。下列链接保留作品与作者归属，本次未复制、上传其视频或音乐，也未重新核实链接可用性。
- 比特新语：《熵增》 ↗（新窗口打开）：从生活事件进入机制，再回到行动。
- 风摇叶见蝶：《定风波》相关短片 ↗（新窗口打开）：文字成为空间，同一场景的状态承接情绪。
- 骑老爷爷过马路被罚300：《opus家族史》 ↗（新窗口打开）：从实物到机制，再归拢为关系图。
- 电子智人：信息论《惊奇之学》 ↗（新窗口打开）：让观众先经历预测，再解释概念。
- 观默：十二条动画法则演示 ↗（新窗口打开）：围绕可辨认的主体比较运动机制。
关于网页里的交互状态与设计提示词，可接着看《把「好看一点」写具体》。