本节书摘来自异步社区《HTML5+JavaScript动画基础》一书中的第1章，第1.2节，作者：【美】Billy Lamberta , Keith Peters著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.2　帧与运动

动画是一个创造运动假象的过程。几乎所有的投影运动媒体都采用帧实现运动。

帧是将一系列离散的图像以极快的速度连续播放从而模拟物体运动或变化。帧是你能在电脑、电视或电影屏幕上看到任何东西的基础。这个想法要回溯最早期的卡通，当时动画家把很多独立的图片绘制到一张张赛璐珞片（又称明片）上，而早期的运动影片同样是针对多张照片采用了类似的技术。

利用帧实现动画的概念很简单：当我们连续播放一系列有略微差别的图像时，大脑会将它们想象成一幅不断运动的图像。但是为什么我们坚持将其称为一种运动的假象？如果你在电影屏幕上看到一个人走过一间房间，这不算是运动吗？当然不算，因为这只不过一个人的图像而不是真人，但是这并不是我们不将其视为运动的原因。

注意，运动的物体通过穿越两点间的空间实现从一个点移动到另一个点。穿越空间的过程是流畅的，而不是跳跃的，这才是真实的运动。而基于帧的运动恰恰是跳跃式的。它的移动不是从一点到另一个点，而是在每一帧中从一个位置消失并出现在另一个位置。移动得越快，跳跃的感觉就越明显。

如果你看到一张图片里有一个人在房间的左边，而几秒钟后同一个人又出现在房间的右边，那么你会认为这是两张图片而绝不会把它们当做动画。即便你看到6张图片连在一起表现出一个人穿过房间的过程，你也只会把它们当做一系列独立的照片（见图1-1）。如果有足够多的照片以足够快的速度播放，虽然还是改变不了它们只是一系列静态照片的事实，但是你的看法却会发生变化。你的脑子会把它们当做一个人穿过了房间。与最开始的两张照片相比，它并没有什么本质不同，它始终不是真实的运动，不过，在到达某个频率之后，我们的大脑被欺骗了，认可了这一运动的假象。

电影产业对这个频率做了大量的实验。研究表明将频率保持在每秒24帧，人们就会把这些帧视为一张运动的图像。如果低于此频率，人们就会察觉到跳帧，也就打破了这种运动的假象。并且人类的眼睛似乎无法区分比这更高的频率，每秒播放100帧并不会让你的动画显得更真实，尽管更高的帧率在电脑动画中会带来更好的互动感和流畅度。

1.2.1　记录帧
帧的完整概念使得以下3件事得以实现：储存、传播以及播放。你无法储存、传播以及播放一个真实的人走过一个房间，但是你可以保存那个人走过房间的很多照片，你可以传播这些图像并播放它们。这样，只要你能够解读这些保存的图像并有办法播放它们，你就可以在任何地方以及任意时间展现这一动画。

现在，我们需要给帧一个更加通用的定义。目前为止，我们一直将帧视为一张静止的照片或图画。让我们将之称为对一个系统在某一特定时间点的记录。这个系统可以是一个人穿越房间，时间可以是当他走到房间中间的时候，而此时的记录就是他走到房间中间的那张照片。另一方面，系统也可以是一个虚拟对象集合，此时的记录就是它们在某一特定时刻的形状、颜色以及位置。这样，你的动画就不再是一系列静止的图像，而是一系列关于图像的描述信息。电脑会根据这些描述信息创建并显示图像，而不是直接播放这些图像。将这一思想进一步演化就衍生出了程序帧。

1.2.2　程序帧
由于你有一台可以任由你使用并能够根据需要完成计算的电脑，因此你并不需要通过一个很长的帧描述列表实现动画。你可以将之简化为起始帧的一个描述，而后遵循某些特定的规则构建后续帧。此时，电脑所要做的就不仅仅是根据图像描述创建出一幅图像，而是要先创建图像描述，再根据描述创建图像并最终显示图像。

考虑一下采用这一方式你可以节省多少硬盘空间。图像需要占用硬盘的磁盘空间以及带宽，每秒24幅图像会迅速占用大量的空间。如果你将其简化为一份描述与一系列规则，那么文件大小则会急剧缩减。即便一系列用于表现物体运动与交互的复杂规则所占的空间也不会超过一幅中等大小的图像。事实上，人们对程序动画的第一印象就是文件是多么小。

自然，这是有代价的。随着系统变得越来越大，规则变得越来越复杂，电脑必须能够迅速地计算出下一份图像描述，并将其显示出来。如果你想保持一定的帧率，那么给予电脑的处理时间（毫秒级）就极其有限。如果电脑无法及时完成计算，帧率就会下降。而另一方面，基于图像播放的动画就无须关心场景中的内容以及它有多复杂，它只需要不断显示下一幅图像，而这通常是准时的。