1. 动画的起源：从视觉暂留到数字动画，理解帧率(FPS)的基本概念

说实话，每次我给学生讲动画原理，都会先问一个问题：为什么连续播放的静态图片会「动」起来？

这个问题看似简单，但背后藏着整个数字动画的基石。我自己刚入行时，以为动画就是「快速放图片」，直到第一次做帧率优化被坑惨了——嗯，那都是后话了。

1824年，英国医生彼得·马克·罗杰特发现了一个有趣的现象：人眼视网膜上的影像，在物体消失后还会短暂停留约0.1-0.4秒。这就是「视觉暂留」（Persistence of Vision）。

说白了，你的眼睛是个「慢半拍」的传感器。画面切换够快时，大脑会自动把碎片拼成连续运动。我经常跟团队说：动画不是真的在动，是大脑在「脑补」。

关键数字：

你想想看，如果每帧间隔超过视觉暂留时间，画面就会「闪」。这就是为什么早期电影必须用 24 FPS——再低就穿帮了。

1832年，比利时物理学家约瑟夫·普拉托发明了诡盘（Phenakistoscope）。一个圆盘上画着连续动作的分解图，旋转时通过狭缝观看，就能看到动画。

我记得第一次在博物馆看到实物时，觉得这东西太简陋了。但原理和今天的 60 FPS 游戏一模一样——快速切换静态帧，欺骗视觉系统。

后来有了赛璐珞动画（Cel Animation）。迪士尼在 1930 年代把这项技术玩到了极致：

这其实就是现代游戏引擎里「分层渲染」的祖宗。我在做 UI 动画优化时，经常用这个思路：静态元素缓存，只刷新变化区域。

1960年代，计算机开始介入动画制作。伊万·萨瑟兰的Sketchpad（1963）是第一套交互式图形系统。但真正让数字动画起飞的是帧缓冲（Frame Buffer）的出现。

1980年代，帧缓冲器能存储一整帧图像，然后以固定速率输出到显示器。这时候，帧率（FPS）成了一个需要精确控制的工程参数。

我的经验：做 UI 动画时，很多人只关注「能不能跑到 60 FPS」，却忽略了「帧率是否稳定」。我曾经接手过一个项目，平均帧率 55 FPS，但每 2 秒掉一次到 20 FPS——用户体感比稳定 30 FPS 还差。稳定比高帧率更重要。

FPS = Frames Per Second，每秒传输的帧数。就这么简单。但背后涉及三个关键环节：

这三个帧率不一定相等。我见过最典型的坑：应用跑 120 FPS，但显示器只有 60 Hz，结果画面撕裂（Tearing）。或者反过来，显示器 144 Hz，但应用只能跑 40 FPS，那画面照样卡。

避坑指南：我曾经在一个项目中，为了追求「高帧率」，把渲染线程优先级调到最高。结果帧率确实上去了，但 UI 事件响应延迟暴增——用户点击按钮后 500ms 才有反馈。记住：帧率不是唯一指标，交互响应时间同样重要。

为什么 24 FPS 的电影看起来流畅，但 24 FPS 的游戏却卡成狗？

原因在于运动模糊（Motion Blur）。电影每帧曝光时间内，运动物体会在胶片上留下模糊轨迹。人脑会自动把模糊解释为「运动」。而游戏渲染的是瞬时快照，每帧都是清晰的，缺少运动模糊，所以需要更高帧率来模拟平滑感。

我做过一个实验：给游戏加上后处理运动模糊后，30 FPS 的体验能接近 60 FPS 的清晰渲染。但代价是 GPU 开销增加 15-20%。工程就是取舍。

下面这张图，是我自己梳理的本章知识结构。建议你保存下来，后面每章都会用到。

这一章我们聊了：