题记:网页动画和传统动画一样遵循一些原则。
在制作动画时,请牢记下列指导原则:一,使用类似requestNextAnimationFrame这样的“polyfill”方法来保持浏览器兼容性。二,使用“基于时间的运动”来协调动画的播放速度。三,用剪辑区域或图块复制技术将复杂的背景图像恢复到屏幕上。四,必要时可使用一个或多个离屏缓冲区以提升背景的绘制速度。六,不要通过CSS指定阴影及圆角效果。七,不要在Canvas中进行带有阴影效果的绘制操作。八,不要在播放动画时分配内存。九,使用件能调试及时间输工具来监控并改善动画的绘制效率。十,将业务逻辑的更新与动画的绘制分开。
requestNextAnimationFran比setTimeout或setInterval要好,因为它是专门为了制作动画而编写的。将运动物体的更新逻辑与这些物体的绘制分开来做也是个好办法,因为如果在绘制的同时改运行物体的属性,则有可能干扰动画的播放。
制作者还应该使用“基于时间的运动”算法来确保动画在不同情况下都能以相同的速度行,不受底层帧速率的影响。对于大多数动画来说,哪怕应用程序运行得再慢,我们都要保证画能够以平稳的速度播放,在制作游戏时尤其要注意这一点。运用本章所学知识,开发者可以现“基于时间的运动”算法,让动画播放速度不受帧速率的影响。至少对于简单的运动方式而言这种算法是很容易实现的。
请记住,浏览器会自动对Canvas元素运用双缓冲机制。由于这个原因,所以开发者没有必要自己再去实现它。而离屏缓冲区则是很有用的,我们经常在程序中使用一个或更多的离屏缓冲区,尤其在绘制复杂动画背景时更是如此。在其余因素都相同的情况下,从离屏缓冲区中复制图像到屏幕上,与直接重绘每帧动画的背景相比,绘制效率要更高一些。
不论是使用CSS代码来指定效果还是直接修改Canvas元素属性,阴影与渐变都会降低绘图效率,在移动设备上尤为明显。如果应用程序运行得很慢,那么一定要在启用阴影与渐变效果和不启用效果的情况下分别测试,以确定是否由于启用了阴影与渐变效果而导致程序变慢。最后要说的是,在播放动画时,应该避免分配内存。因为此时浏览器不会运行垃圾收集器。
这里是触须动漫,本篇引自《HTML5Canvas核心技术——图形、动画与游戏开发》,手敲文字,请勿抄袭搬运,允许转载,请标明出处。节约粮食,不要浪费。祝国产动漫再上一层楼。