14.3  创建平滑的动画效果

如前面所讲，动画其实就是一种幻觉，就是骗过人们的眼睛，让人们认为物体就是在自然而然地运动着。不过，如果动画产生了跳动，这种幻觉就被打破了，在这样的动画中，用户可以看出来，最终的动画效果其实是由那些离散的效果构成的。不过不用担心，这里有一些小技巧可以减小动画的跳动性。

 方 法

JavaScript动画的平滑效果是受很多因素制约的：

l     各个动画帧之间的时间长度；

l     各帧之间的像素距离（或者是变化的次数）；

l     想要实现的动画复杂度；

l     运行动画的机器的速度；

l     展示动画的浏览器的速度。

上面所说的这些因素，有些是可以人为控制的，但是有些则是人所不能控制的。下面将对各种因素进行详细深入的探讨。

14.3.1  动画帧时间

在前面介绍的方法中，为了在屏幕范围内移动对象，使用了一个50毫秒的时间间隔，这个时间间隔实际上大概等于每秒20帧的帧速率（20 fps）。与这个相比，电影的帧速率大概为24 fps或者25 fps，而电视帧速率的标准在不同地方是不一样的，不过都处在25 fps到30 fps之间这个范围内。尽管20 fps产生的动画效果不像理想中那样平滑，但是还是可以接受的。之所以使用这种并不是很完美的方案，主要是因为一般大多数计算机系统根本就不能处理更高的帧速率。所以为了确保在不同系统之间速率保持一致性，最好就是使用一个比最高速率低一点的帧速率。

如果计算机可以在所选的任何帧速率下运行动画，那么帧速率越大产生的动画效果就越好。所以，如果将调用moveObject的时间间隔设置为25毫秒，那么在能够处理该动画的系统上，得到的帧速率大概是40 fps：

setTimeout(function(){moveObject(target, destinationX,

    destinationY, maxSpeed);}, 25);

不同的计算机所能处理的帧速率依赖于动画的复杂度、其他的应用程序占用CPU的比率以及其他各种不同的因素。所以，在不同的环境下使用不同的帧速率来实现还是值得一试的。

14.3.2  两帧之间移动距离的变化

比起幅度大的动作来说，幅度小的动作肯定更不容易被人们发现。虽然很多流行游戏中的Flash和3D图形引擎都支持动态反锯齿技术，利用这种技术可以使运动的幅度比1 pixel还要小1，但是在DHTML的世界里，是不存在反锯齿的，所以在这里，计算机显示器上最小的运动幅度就是1 pixel，这也是可以显示出来的最小单位。利用尽可能小的显示单位（也就是1 pixel的变化）做成一个动画，就可以将动画的跳动性降到最小，不过与此同时，对象移动的速度也会受到影响。

前面所讨论的那个例子要求对象以每秒20帧的速率移动到距离500 pixels的地方。如果对象每帧移动25 pixels，那么它就需要1秒钟到达目的点，可是如果每帧只移动1 pixel，那么将需要25秒移动500 pixels。同样，帧速率的变化也会影响动画的平滑性。所以，必须对动画的运动速度和平滑性（完成整个运动需要在中间设置的离散点的个数）做一个折中的考虑。

14.3.3  动画效果的复杂度

在显示对象动画的过程中，最耗费时间的可能就是浏览器和计算机将图片在屏幕上显示出来这个过程了。浏览器需要计算对象将如何呈现在页面上，另外还要计算对象如何与其他的元素进行交互。计算机需要将所有这些信息都翻译出来，然后才能将动画显示在显示器上。

如果有很大的一块动画区域，或者说很多对象需要同时动起来，那就将影响重新绘制对象所需要的时间，还会影响对象运动起来产生跳动性的幅度。由此看来，通过减小动画的大小，或者减小同时发生的动画数目，便可以降低动画的复杂度，还会减小它的闪动。

14.3.4  计算机的速度

从最基本的角度来讲，JavaScript动画其实就与计算有关。寻找对象、做数字的乘法以及绘制颜色，所有这些动作都依赖于计算机的处理能力。另外，浏览器的计算能力也会影响到动画显示的效果。

用户的硬件档次是开发者所不能控制的，但至少可以使JavaScript代码尽可能简洁，避免CPU进行一些无谓的冗余计算，还可以降低动画复杂度，这些都有助于使动画效果显得更加流畅逼真。

14.3.5  浏览器的速度

不同的浏览器显然会使用不同的应用程序代码来执行不同的函数。用IE执行一个正则表达式与用Safari来完成同样的一件事情所耗费的时间是不一样的，同样，用Mozilla为某个元素计算样式和用Opera完成相同的计算所耗费的时间也是不同的。

浏览器使用的引擎不同，那么动画的执行效果也是不一样的，但是没有办法控制用户使用什么浏览器，能做的最实际的工作只是确保JavaScript代码和动画最优化。