window.requestAnimationFrame

今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的，按照个人理解就应该是调用setInterval来循环调用动画函数来实现。可是在Demo中就是找不到这个函数。干着急的小猪只好一步一步的来看是怎么实现的，以后发现了这么一句代码：

window.RAF = (function () {
    return window.requestAnimationFrame || 

           window.webkitRequestAnimationFrame || 

           window.mozRequestAnimationFrame || 

           window.oRequestAnimationFrame || 

           window.msRequestAnimationFrame || 

           function (callback) { window.setTimeout(callback, 1000 / 60); };
})();

原来是这样。

window.requestAnimationFrame 告诉浏览器您要执行的动画而且请求浏览器的在下一个动画帧重绘窗口,方法在浏览器重绘以前做为一个回调函数被调用,就是告诉浏览器在刷新屏幕的时候，调用这个方法。

 

在90年代，那个互联网作广告的年代，window上面各类走马灯，各类状态文字都是用setTimeout来时实现的。

动画的问题最棘手的是延时问题，对于显示器来讲，每一秒60帧频，若是咱们按照浏览器的刷新速率来控制咱们的动画时间的话会有很好的效果，即17ms,setTimeout（callback,1000/60)，可是：
1.各个浏览器及时精度是不同的。
2.对于setTimeout 和setInterval 实现机制并非咱们须要的那样，当通过特定的时间后，浏览器会将那部分代码加入到UI的绘制队列当中，若是这个时候UI线程很忙，有其它的任务阻塞，动画的下一帧就不会按时执行。通过长时间的累计堆加以后，可能咱们偏离原来的时间点偏差愈来愈大。
Mozilla 的 Robert O'Callahan 在思考这个问题，并想出了一个独特的方案。他指出CSS transitions 和 animations的优点在于浏览器知道哪些动画将会发生，因此获得正确的间隔来刷新UI。而javascript动画，浏览器不知道动画正在发生。他的解决方案是建立一个mozRequestAnimationFrame()方法来告诉浏览器哪些javascript代码正在执行，这使得浏览在执行一些代码后获得优化。
mozRequestAnimationFrame()方法接受一个参数，是一个屏幕重绘前被调用的函数。这个函数用来对生成下合适的dom样式的改变，这些改变用在下一次重绘中。你能够像调用setTimeout()同样的方式链式调用mozRequestAnimationFrame()。
这个就是window.requestAnimationFrame的由来。

在Mozilla官网看到以下

Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.
因为这项技术的规范尚未稳定，正确的前缀使用在各类浏览器的兼容性表。还要注意的是语法和行为的实验技术是若有改变，在将来版本的浏览器的规格变化。
目前在Android系统下是不支持的，动画只能setTimeout咯。