什么是动画：从视觉残像到运动幻觉的科学
第 1 章 什么是动画：从视觉残像到运动幻觉的科学
拿起一本普通的练习本，在每一页的右下角画一只火柴人——第一页的腿伸直，第二页的腿微微弯曲，第三页弯得更多，第四页几乎蹲下……画完二三十页后，用拇指快速翻动书角。奇迹发生了：纸上的火柴人好像活了过来，正在做下蹲动作。
这并不是魔法，而是物理学、神经科学和工程学共同造就的视觉奇迹。静止的画面明明没有动，为什么快速连起来看就会"动"？ 本章将带小读者一层一层揭开这个秘密。
1.1 视觉残像原理：人眼为何会把连续画面解读为运动
要把这个问题讲清楚，我们要先了解人眼是怎么工作的。
我们的眼睛像一台精密的照相机。光线穿过角膜和晶状体，落在视网膜上——视网膜位于眼球最深处，上面密密麻麻地排列着大约 1.3 亿个感光细胞。当光线照到这些细胞时，它们会把光信号转换成电信号，通过视神经传给大脑。大脑接到信号后，会"翻译"成我们看到的图像。
这里有一个关键问题：感光细胞的工作速度有多快？ 一颗感光细胞从"接收到光"到"完成一次放电"，大约需要 50 毫秒（也就是 0.05 秒）。在它完成一次放电、准备接收下一次光信号之前，它会保持刚才的状态大约 100 毫秒（0.1 秒）。这个"图像暂时留在眼睛里"的现象，就是视觉残像（Persistence of Vision），也叫做"视觉暂留"。
视觉残像的发现，是 19 世纪欧洲科学家们非常热衷的课题。1824 年，英国医生兼物理学家彼得·马克·罗热（Peter Mark Roget）在伦敦皇家学会做了一场著名的报告，题目是《论物体在视网膜上成像的持续性》。他注意到一个现象：如果你透过一个狭窄的缝隙看一个转动的车轮，会觉得车轮的辐条是弯的甚至不转了——这正是眼睛"看不过来"造成的错觉。
受到罗热的启发，比利时物理学家约瑟夫·普拉托（Joseph Plateau）和奥地利几何学家西蒙·冯·施坦费尔（Simon von Stampfer）在 1832 年几乎同时发明了一种叫"幻盘"（Thaumatrope）的小玩具：在一张圆形纸片的两面分别画一只笼子和一只小鸟，用两根线把纸片快速搓转，两个画面就会"叠"在一起，看起来像小鸟被关在笼子里。这是人类历史上第一次利用"视觉残像"制造"会动的画面"。
不过，科学界后来发现，事情并没有这么简单。1978 年，美国视觉科学家乔治安德森和芭芭拉·安德森做了一系列实验，发现我们看到的"运动幻觉"主要不是来自"残像"，而是一种叫"表观运动"（Apparent Motion）的脑补机制——大脑会把在时间上相邻、空间上接近的两个亮点，自动解读为同一个东西在移动。换句话说：电影之所以"动"，不是因为眼睛"看不清"上一帧，而是因为大脑"太勤快"了，主动帮你把两张图连起来。
这就是为什么我们看到 24 张图/秒的电影会感觉是连续运动——真正在工作的是大脑，不是眼睛。眼睛只是老老实实接收信号，而大脑扮演了一位"动画师"，把一张张静止的画面串成了故事。
```mermaid flowchart TD A[Frame 1: Ball at Position A] --> D[Sequential Playback at 24fps] B[Frame 2: Ball at Position B] --> D C[Frame 3: Ball at Position C] --> D D --> E[Eye Receives Each Frame Separately] E --> F[Visual Persistence Holds Image 0.1s] F --> G[Brain Fuses Adjacent Frames] G --> H[Perceived as Smooth Continuous Motion] ```
虽然科学解释已经修正，但"视觉残像"这个术语已经深入人心，所以直到今天，介绍动画原理的教材依然会从视觉残像讲起。
1.2 帧（Frame）的基本概念：动画的最小时间单位
了解了"为什么"之后，我们来认识动画的"零件"——帧。
帧（Frame）就是动画中最小的、不可分割的"单位时间切片"。你可以把它想象成电影胶片上的一张画格，或者手机相册里的一张照片。在动画里，每一帧都是一张完整的静态画面，区别只在于画面上的人物、动物或背景稍微有一点点不同。
假设你正在看一个走路的人。他抬起的左脚、落下的左脚、迈出的右脚、落地的右脚……如果把他每 1/24 秒的样子都拍一张照片，连续起来播放，就变成了一个会走路的人。这个每一张照片就是"一帧"。
那么，一秒钟的动画需要多少帧呢？这就要看我们要做"什么级别"的动画了：
- **8 帧/秒**：早期无声电影（1900 年代初期）、最早的游戏（比如 1972 年的《Pong》）。画面会一卡一卡的，但成本极低。
- **12 帧/秒**：传统 2D 动画的"动画一拍二"模式（见下文），日本早期 TV 动画常用，节省人力。
- **24 帧/秒**：电影、剧场版动画、绝大多数电视剧的工业标准。流畅、省胶片，是 100 多年来的"黄金标准"。
- **30 帧/秒**：北美电视广播标准（NTSC 制式），电视台信号。
- **60 帧/秒**：高端游戏、VR 虚拟现实、体育直播。从 2020 年代开始，越来越多的手机支持 60 帧甚至 120 帧。
- **120 帧/秒及以上**：电影《霍比特人》系列、《双子杀手》，电竞显示器，iPad Pro 高刷新率屏幕。
帧数越多，动画看起来越流畅、越接近现实，但代价是文件体积成倍增长。一部 90 分钟的电影，如果是 24fps，就会有 24×60×90 = 129,600 帧。如果升到 60fps，帧数变成 324,000 帧，胶片用量和存储空间都要翻 2.5 倍。这就是为什么电影院、电视台和游戏公司要"精打细算"地选帧率——既要流畅，又要不烧钱。
1.3 帧率（fps）对动画流畅度的影响：12fps、24fps、60fps 的真实差别
光看数字太抽象，我们来做几组对比。
实验一：6fps 的"超级慢动作"动画 拿 6 张纸，每张纸画一只火柴人，每张之间腿弯曲的角度差别较大。快速翻动后，你会看到一个动作非常急促、像机器人僵硬抽搐的火柴人——每两帧之间跳得太明显，眼睛能感觉到"画面在闪烁"。
实验二：12fps 的"经典动画"模式 改用 12 张纸，每张纸之间腿的弯曲角度只有一点点差别。快速翻动后，火柴人的动作会"基本看得过去"，但仔细盯着某个部位，仍然能感觉有"抖动"——这就是早期日本 TV 动画的"省钱模式"。
实验三：24fps 的"电影级"动画 用 24 张纸，每张之间的差别更小了。快速翻动后，火柴人的动作会非常流畅，几乎可以乱真——这就是你在电影院看到的"真实感"的来源。
实验四：60fps 的"游戏级"动画 如果用 60 张纸来画一个 1 秒钟的动作（这是普通小学生不可能完成的任务，需要专业动画师和数字工具），那么每一个动作都会丝滑到极致，连快速移动的物体边缘都没有"残影"。
为了让大家一目了然，我们用一张表来对比：
| 帧率 | 一秒帧数 | 视觉效果 | 常见用途 | 每分钟文件大小（约） | |------|----------|----------|----------|----------------------| | 6 fps | 6 | 严重卡顿，像 PPT 翻页 | 极早期实验、故障艺术 | 极小 | | 12 fps | 12 | 略卡，有抖动 | 早期 TV 动画、二次元作画 | 小 | | 24 fps | 24 | 流畅，电影感 | 电影、剧场动画 | 中等 | | 30 fps | 30 | 流畅，电视感 | 北美电视、网络视频 | 较大 | | 60 fps | 60 | 极流畅，无残影 | 高端游戏、VR、电竞 | 大 | | 120 fps | 120 | 超越现实，肉眼难分辨 | 高端电影、旗舰手机 | 极大 |
为什么 24fps 成了"百年标准"？ 这里有一段历史。
1927 年，华纳兄弟公司出品的《爵士歌王》上映，这是世界上第一部有声电影。当时有声电影采用的光学录音技术要求胶片以 24 张/秒的速度通过音鼓，这样声音才不会变调。为了保证声音清晰，胶片速度被锁定在 24fps——画面也跟着享受了这个"标准"。从那以后，全世界的电影工业都采用了这个数字，整整沿用了一百年。
为什么 60fps 更适合游戏？ 因为游戏是"实时渲染"的，你每按一次键盘或鼠标，画面就要立刻更新一次。如果帧率太低，按下"跳跃"键后，画面要等 100 毫秒才反应过来——你会觉得"卡"了。60fps 把每帧的间隔压到 16.67 毫秒以内，按键几乎"零延迟"，所以电竞选手都对帧率非常敏感。
人眼能分辨多少帧？ 这个问题的答案直到今天还有争议。大部分视觉科学家认为，人眼在中心视野里能稳定分辨的最高频率是 50~60Hz（也就是 50~60 帧/秒）。但"分辨得清楚"和"感觉到流畅"是两码事——有实验显示，在 A/B 对比中，许多人能可靠地分辨出 60fps 和 120fps 的差别，尤其是在画面快速移动时。也就是说，人眼并不是"30fps 封顶"的机器，而是会随着训练和注意力提升感受到更高帧率的好处。
1.4 关键帧（Keyframe）与中间帧（In-between）的分工
画 30 张画已经够累人了，要是 1 秒钟要画 24 张，一部 90 分钟的电影岂不是要画129,600 张？这显然不现实。1920~1930 年代的好莱坞动画师们，发明了一套聪明到极点的"分工制度"，沿用至今。
这部流水线分两种角色：
关键帧（Keyframe）：由资深动画师画出来。一个镜头里，最重要的画面通常只有 3~5 张：起跳的最低点、抛物线的顶点、落地的瞬间……这些画面叫做"关键帧"，因为它们决定了动作的姿态和时间。比如一个 1 秒钟的跳跃镜头，资深动画师可能只需要画 3 张：起跳、空中、落地。
中间帧（In-between Frame）：由助理动画师画出来。在两张关键帧之间，需要插入若干张过渡画面，让动作变得平滑。这些过渡画面就叫"中间帧"（日语里叫"中割り"，naka-wari）。比如 1 秒钟 24 帧，资深动画师画了 3 张关键帧（分别在第 0 帧、第 12 帧、第 24 帧），那么中间就要插 21 张中间帧（每一段大约 10 张）。这些中间帧不需要太多创造性，按部就班地"补"出动作的轨迹即可。
我们用跳起来的小球来举个具体的例子：
假设要做一个 1 秒钟、24fps 的"小球跳跃"镜头，资深动画师只画 4 张关键帧：
- **第 0 帧（K1）**：小球在地面，位置 0
- **第 8 帧（K2）**：小球升到最高点，位置 100
- **第 16 帧（K3）**：小球又回到最高点（第二次跳跃的顶点），位置 100
- **第 24 帧（K4）**：小球落地，位置 0
剩下的 20 帧（1~7、9~15、17~23）都要由助理动画师根据小球的运动轨迹——一段上升（0→100）、一段下降（100→0）、一段上升（0→100）、一段下降（100→0）——依次补上。如果上升是匀速的，那第 1 帧就在位置 12.5，第 2 帧在位置 25，第 3 帧在位置 37.5……以此类推。
这样做有什么好处？成本大幅下降、效率大幅提升。一个动画长片通常只需要 30~50 个资深动画师，但需要 200~500 个助理动画师。中国 1960~1980 年代的上海美术电影制片厂，巅峰时期就有 700 多人专门做中间帧。
数字时代来临后，这套流程被算法大幅简化了。Adobe After Effects、Adobe Animate、Blender、Toon Boom 等软件都有自动补间（Auto Tween）功能：你只需要画好两个关键帧，软件会自动生成中间的所有过渡帧。当然，好的动画师依然需要手动微调自动补间的结果——因为软件不懂"动作的感觉"，它只会按数学公式算。所以手工画中间帧的技能，依然是动画师的基本功。
一个专业小知识：日本动画产业长期采用"一拍二"（也叫"动画二コマ撮"）的省钱模式——一个画格画 2 次（也就是 12fps 而不是 24fps）。这样一部 24 分钟的 TV 动画，关键帧大约 3000 张，加上中间帧总共只需要画约 30000 张；如果做"一拍一"（24fps），总数就要翻倍。日本 TV 动画"省钱模式"是出了名的——比如《海贼王》《火影忍者》的原画集就明确标出了哪些镜头是"一拍二"、哪些是"一拍三"（8fps）甚至"一拍四"（6fps）。正是这种"压帧率"做法，让日本动画能以相对低的成本每周更新一集。
1.5 翻页动画实验：用 30 张纸创造一个跳动的小球
理论讲了这么多，最重要的还是"自己动手"。下面我们做一个经典的实验——翻页动画书（Flipbook）。这个实验不需要任何电子设备，只需要纸、笔、橡皮，最适合家庭作业或科学课。
1.5.1 准备材料
- **A4 复印纸 30~40 张**（厚度在 70~80g 之间，太厚翻不动，太薄画面会透到背面）
- **铅笔**（HB 即可，先用铅笔打草稿，确认后再用黑色水笔描线）
- **黑色中性笔**（0.5mm 或 0.3mm）
- **橡皮**
- **回形针或长尾夹**1 个（用来夹住翻页动画书的一边，让它不容易散开）
- **彩色马克笔或水彩笔**若干（用来上色，选用）
1.5.2 规划动作
我们要做的动作是"跳动的小球"——一个小球从画面左下角弹起，在空中画一道弧线，再落回原地，跳第二次、第三次……总共跳 3 次，每次跳得更高一点（或者跳得越来越低，给人"疲倦"的感觉），最终滚出场外。
为了让动画看起来"对"，我们需要做一步关键动作规划：
- **总帧数**：30 帧（1.25 秒动画，24fps 标准下）
- **动作分解**：
- 第 1~10 帧：小球从地面（位置 A）跳到最高点（位置 B）
- 第 11~20 帧：小球从最高点 B 落到最低点 C（比 A 稍高一点，模拟"跳得越来越累"）
- 第 21~30 帧：小球从 C 跳到 D，落地后继续滚出场外
为什么 30 帧？ 因为人眼大约需要 30 帧才能稳定地"看清"一个连续动作；同时 30 帧在 1.25 秒里翻完，速度刚好适合手翻——不会太快看不清，也不会太慢到一眼就翻完。
1.5.3 详细步骤
步骤 1：把纸装订成册 把所有纸整齐叠放，左上角用回形针夹住。注意每张纸都要对齐，否则翻动时会"卡纸"。
步骤 2：画"定位辅助线" 在每张纸的同一位置（建议离左下角 2cm 处）轻轻画一个十字，作为小球的"基准位置"。这个十字会留到完成时再擦掉。
步骤 3：画第 1 帧（关键帧 K1） 在第一张纸上，画一个直径 2cm 的实心圆，圆心在"十字"位置。这就是小球的起始位置。
步骤 4：画第 10 帧（关键帧 K2） 在第 10 张纸上，画一个直径 1cm 的圆（视觉上"小一点"，因为球飞得远显得小），位置在十字的右上方约 5cm 处——这就是小球的"最高点"。
步骤 5：画第 20 帧（关键帧 K3） 在第 20 张纸上，画一个直径 1.8cm 的圆，位置在十字的右侧约 3cm、向上 1cm 处（落地瞬间，球被压扁一点，所以略微椭圆更逼真）。
步骤 6：画第 30 帧（关键帧 K4） 在第 30 张纸上，画一个直径 2cm 的圆，位置在画面最右侧——小球滚出场了。
步骤 7：补中间帧（最重要的步骤） 从第 2 张到第 9 张（共 8 张），依次画出小球从起始位置到最高点之间的过渡：
- 第 2 张：圆在十字的右上方 0.5cm
- 第 3 张：圆在十字的右上方 1cm
- 第 4 张：圆在十字的右上方 1.5cm
- 第 5 张：圆在十字的右上方 2cm
- 第 6 张：圆在十字的右上方 2.5cm
- 第 7 张：圆在十字的右上方 3cm
- 第 8 张：圆在十字的右上方 3.5cm
- 第 9 张：圆在十字的右上方 4cm
然后从第 11 张到第 19 张（共 9 张），画出最高点到落地瞬间的过渡。这里要小心——下降比上升快，所以中间帧之间的间距要稍微大一点（前密后疏，模拟重力加速）：
- 第 11 张：圆在右上方 4.2cm
- 第 12 张：圆在右上方 4.6cm
- 第 13 张：圆在右上方 5cm（抛物线顶点）
- 第 14 张：圆在右侧 4.5cm
- 第 15 张：圆在右侧 4cm
- 第 16 张：圆在右侧 3.5cm
- 第 17 张：圆在右侧 3cm
- 第 18 张：圆在右侧 2.5cm
- 第 19 张：圆在右侧 2cm
最后从第 21 张到第 29 张（共 9 张），画出落地到滚出场外的轨迹。这一段球贴近地面，几乎不跳，所以画面位置变化不大，主要是"水平移动"：
- 第 21 张：圆在右侧 3.2cm
- 第 22 张：圆在右侧 3.6cm
- ……
- 第 29 张：圆在右侧 7cm
步骤 8：上色 用马克笔给每个小球涂上颜色。可以用同一种颜色（最简单），也可以用渐变色（更专业——比如从左到右颜色由浅到深，模拟"运动模糊"）。
步骤 9：擦掉辅助线 确认每张画面都画对后，用橡皮小心地擦掉十字定位线。
步骤 10：装订 把纸整齐叠好，用回形针或长尾夹夹住左边缘。翻动书角，开始欣赏你的动画！
1.5.4 计算你的动画帧率
翻页动画的帧率怎么算？数数你 1 秒钟翻了多少页。最简单的办法：
- 找一位同学帮你用手机**慢动作录像**（240fps）
- 你用 1 秒钟翻完整本动画
- 录像回放，数 1 秒内翻过的页数
如果你翻得特别快，1 秒钟翻过了 30 页，那你的动画就是 30fps——比 24fps 还流畅，看起来相当丝滑。
如果你 1 秒钟只翻了 12 页，那就是 12fps，画面会"抖"。
最佳帧率是多少？ 24fps 已经是电影级，30fps 适合电视，60fps 适合游戏。对于翻页动画这种手动操作，15~25fps 是最舒服的区间——太快了你手会酸，太慢了画面会卡。
1.5.5 故障排查
| 现象 | 原因 | 解决办法 | |-----