最終更新:2015-07-07 (火) 13:53:54 (3187d)
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なし対応
- Firefox 23~
- Google Chrome 24?
- IE10
- Safari 6.1?
- Android 4.4
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?