HTML 5プローブ:requestAnimationFrameでWebアニメーションを最適化する

requestAnimationFrameとは何ですか?
ブラウザアニメーションプログラムでは、ターゲットオブジェクトを数ミリ秒おきに移動して動かすタイマーを使用します.ブラウザ開発者たちは、「なぜブラウザにこのようなAPIを提供しないのか.そうすれば、ユーザーのアニメーションを最適化することができる」という良いニュースがあります.したがって、このrequestAnimationFrame()関数はアニメーション効果に対するAPIであり、DOM上のスタイルの変化やキャンバスアニメーションやWebGLに使用することができます.
requestAnimationFrameを使用するメリットは何ですか?
ブラウザは、パラレルアニメーションの動作を最適化し、動作シーケンスをより合理的に再配置し、マージ可能な動作を1つのレンダリングサイクルで完了させ、よりスムーズなアニメーション効果を発揮します.例えば、requestAnimationFrame()により、JSアニメーションはCSSアニメーション/変換またはSVG SMILアニメーションと同期して発生する.また、ブラウザのラベルページでアニメーションを実行すると、このラベルページが表示されない場合、ブラウザが一時停止し、CPU、メモリの圧力が減少し、バッテリーの電力が節約されます.
requestAnimationFrameの使い方

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


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

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

requestAnimationFrameのより堅牢なパッケージ
Operaブラウザの技術者エリック・ムーラーは、この関数をカプセル化し、さまざまなブラウザとの互換性を向上させた.この文章を読むことができますが、基本的に彼のコードは4 msか16 msの遅延を使用して60 fpsを最適にマッチングするかを判断することです.次はこのコードです.使用できますが、このコードには標準関数が使用されており、さまざまなブラウザエンジンに互換性のある接頭辞が追加されています.

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

requestAnimationFrameの効果を見てみましょう
 requestAnimationFrame API

window.requestAnimationFrame(function(/* time */ time){
  // time ~= +new Date // the unix time
});

コールバック関数のパラメータは時間に入ることができます.
各ブラウザのrequestAnimationFrameに対するサポート状況Googleブラウザ、火狐ブラウザ、IE 10+はこの関数を実現しており、あなたのブラウザが古くても、上記のrequestAnimationFrameパッケージはこの方法をIE 8/9でエラーを起こさないようにすることができます.