RequestAnimationFrame for smart animating

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 

什么是 requestAnimationFrame?

在你的动画工作中，你经常用一个计时器来每毫秒的改变。好的方面：浏览器供应商决定：”我们何不就给你一个API来做动画，因为我们可以适当地为你们优化一些事情。“所以，它是实现动画基本的API。

我为什么用它？

浏览器可以优化并行的动画，合成一个简单的回流，重新绘制，导致高精度的动画。例如JS-based 动画和CSS转变 或则SVG SMIL 同步。因此，如果你想在标签上运行动画，是不可能的，浏览器不会自动运行，这就意味着更少的CPU,GPU和内存被用了，这样电池就更赖用了。

OMG，我可以用一个省电的动画

我是怎么实现的

//shim layer with setTimeout fallback

window.requestAnimaFrame=(funcion(){

    Return window.requestAnimationFrame ||

         window.webkitRequestAnimationFrame || 

              window.mozRequestAnimationFrame    || 

              window.oRequestAnimationFrame      || 

              window.msRequestAnimationFrame     || 

              function(/* function */ callback, /* DOMElement */ element){

                window.setTimeout(callback, 1000 / 60);

              };

    })();

       // usage:

    // instead of setInterval(render, 16) ....

 

    (function animloop(){

      requestAnimFrame(animloop, element);

      render();

    })();

    // place the rAF *before* the render() to assure as close to

    // 60fps with the setTimeout fallback.

RequestAnimationFrame API

window.requestAnimationFrame(function(/* time */ time){

    // time ~= +new Date // the unix time

}, /* opt

The callback 是通过限制的时间作为参数。

你可能一注意到了requestAnimFrame的第二个参数：这个元素时可视化的通常和整个动画绑定在一起。像canvas和WebGL,Z这个参数通常是<canvas>，像DOM，你可以审率它，。

它准备好了吗？

限制，Webkit实施（在Safar和Chrome,Mozilla上可行的）不同的slightly.Mozilla's有一个BUG，实际上是:1000/(16+N) fps,N 是你想执行的动画的没毫秒。如果你callback 需要1ms来执行，那么你得到60 fps.