requestNextAnimationFrame的使用
为什么使用requestNextAnimationFrame的使用而不使用window.setInterval()或者window.setTimeout()制作的动画:
使用window.setInterval()或者window.setTimeout()制作的动画,有如下缺点:
1.他们都是通用的方法,并不是专为绘制动画而用
2.即使向其专递以毫秒为单位的参数值,它们也达不到毫秒级的准确性
3.没有对调用动画循环的机制优化
4.不考虑绘制动画的最佳时机,而只会一味地以某个大致的时间间隔调用动画循环。
所以由于调用者其实并不知道绘制一帧动画的最佳时机,甚至很可能根本不了解绘制动画的内部机制。相反,浏览器肯定比调用者了解绘制下一帧动画的最佳时机。因此我们用requestNextAnimationFrame方法来实现主动命令浏览器何时去绘制下一帧动画,让浏览器在它觉得可以绘制下一帧动画时通知你。
requestNextAnimationFrame的使用:function animate(time){
//更新和绘制动画函数
requestNextAnimationFrame(animate)//继续调用animate函数
}
requestNextAnimationFrame(animate)//开始调用animate函数
使用例子链接:http://qishuixian.com/canvas/requestNextAnimationFrame/requestNextAnimationFrame.html
使用列子下载:http://pan.baidu.com/s/1miJK616
参考文献:HTML5Canvas核心技术图形、动画与游戏开发第五章动画
参考文献电子书下载:http://pan.baidu.com/s/1kVBFaf1