最終更新:2015-07-07 (火) 13:53:54 (3215d)  

requestAnimationFrame
Top / requestAnimationFrame

JavaScriptによるスムーズなアニメーションを実現するための仕組み

Timing control for script-based animations

ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。

http://www.w3.org/TR/animation-timing/

メモ

  • この仕様が登場する以前は、JavaScriptでアニメーションといえばsetTimeout()やsetInterval()といったタイマーを使用するのが一般的でした。
  • しかしこれらのタイマーは、アニメーションやグラフィック描画に特化した仕組みではないため、アニメーションがスムーズに行えない場合や、ユーザーが画面を見ていないときでもずっと処理が継続してしまうなどの欠点がありました。
  • requestAnimationFrame()はこうした欠点を補うためのAPIです。
  • 60FPSを振り切らないよう考慮されており、またタブがアクティブでない場合は、実行回数が自動的に低下しCPUの負荷を抑えることができます。
  • 次の再描画で、別のフレームを再描画させたいときは、コールバックメソッド自身で requestAnimationFrame()を呼ばなければなりません。
↑

例 

  • function draw() {
    requestAnimationFrame(draw);
    // Drawing code goes here
}
draw();
↑

ブラウザ別

↑

prefixなし対応

↑

iOS

↑

差異吸収 

  • var requestAnimationFrame = window.requestAnimationFrame ||
　　　　　　　　　　　　　　window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
　　　　　　　　　　　　　　window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
  • Firefox (4～22)
    • mozRequestAnimationFrame?
  • Google Chrome(10～23) , iOS Safari(6) and other WebKit based browsers
    • webkitRequestAnimationFrame?
  • Internet Explorer
    • msRequestAnimationFrame?
  • Opera
    • oRequestAnimationFrame?
↑

対応

↑

関連

↑

参考




検索：