【第5章 动画】5.11 动画制作的最佳指导原则

---

在制作动画时，请牢记下列指导原则：

• 使用类似 requestNextAnimationFrame（）这样的“polyfill 式”方法来保持浏览器兼容性。
• 将业务逻辑的更新与动画的绘制分开。
• 使用“基于时间的运动”来协调动画的播放速度。
• 用剪辑区域或图块复制技术将复杂的背景图像恢复到屏幕上。
• 必要时可使用一个或多个离屏缓冲区以提升背景的绘制速度。
• 不要通过 CSS 指定阴影及圆角效果。
• 不要在 Canvas 中进行带有阴影效果的绘制操作。
• 不要在播放动画时分配内存。
• 使用性能调试及时间轴工具来监控并改善动画的绘制效率。

制作动画时应该使用 requestNextAnimationFrame() 这样的“polyfill 式”函数，此种函数要能够应对本章所述 Firefox 4.0 及 Chrome 10 浏览器特有的 bug 才行。requestNextAnimationFrame() 比 setTimeout() 或 setlnterval() 要好，因为它是专门为了制作动画而编写的。

将运动物体的更新逻辑与这些物体的绘制分开来做也是个好办法，因为如果在绘制的同时修改运行物体的属性，则有可能干扰动画的播放。

制作者还应该使用“基于时间的运动”算法来确保动画在不同情况下都能以相同的速度运行，不受底层帧速率的影响。对于大多数动画来说，哪怕应用程序运行得再慢，我们都要保证动画能够以平稳的速度播放，在制作游戏时尤其要注意这一点。运用本章所学知识，开发者可以实现“基于时间的运动”算法，让动画播放速度不受帧速率的影响。至少对于简单的运动方式而言，这种算法是很容易实现的。

离屏缓冲区则是很有用的，我们经常在程序中使用一个或更多的离屏缓冲区，尤其在绘制复杂动画背景时更是如此。在其余因素都相同的情况下，从离屏缓冲区中复制图像到屏幕上，与直接重绘每帧动画的背景相比，绘制效率要更高一些。

不论是使用 CSS 代码来指定效果还是直接修改 Cavans 元素属性，阴影与渐变都会降低绘图效率，在移动设备上尤为明显。如果应用程序运行得很慢，那么一定要在启用阴影与渐变效果和不启用效果的情况下分别测试，以确定是否由于启用了阴影与渐变效果而导致程序变慢。

最后要说的是，在播放动画时，应该避免分配内存。因为此时浏览器不会运行垃圾回收机制，至少可以说，它此时执行垃圾回收的频率非常低。