requestNextAnimationFrame的使用

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