.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/Window.requestAnimationFrame

この関数はアニメーションの実行と、次の再描画の前にアニメーションを更新する指定した関数を呼び出す事を、ブラウザに伝えます。このメソッドは、再描画の前に実行されるコールバックを引数として取得します。

注意: もし次の再描画で別のフレームをアニメーションしたいのであれば、コールバックのランタイム自身がrequestAnimationFrame()を呼びださなければいけません。

アニメーション画面の更新を開始する際は、このメソッドを呼び出さなければいけません。このメソッドは、ブラウザが次の再描画を実行する前に、指定したアニメーション関数を呼び出すように要求します。コールバックの回数は通常は1秒間に60回ですが、多くのWebブラウザは一般的にはW3Cの勧告に従った表示リフレッシュレートに一致します。バックグラウンド(非アクティブ)のタブで実行される場合、コールバックのレートは低く抑えられる可能性があります。

コールバックのメソッドは、 DOMHighResTimeStampの引数を1つだけ渡され、これには、requestAnimationFrameの発火が開始されコールバックがキューに登録された際の時間データが格納されています。単一のフレーム内に複数のコールバックがあるため、それぞれが直前のコールバックの処理中に時間を渡されたとしても、同じタイムスタンプを受け取ります。(翻訳に自信なし) このタイムスタンプはミリ秒単位の10進数で、最小精度は10マイクロ秒になります。

文法

// Firefox 23 / IE 10 / Chrome / Safari 7 (iOS含む)
requestID = window.requestAnimationFrame(callback);

// Firefox < 23
requestID = window.mozRequestAnimationFrame(callback);

// Safariの古いバージョン / Chrome
requestID = window.webkitRequestAnimationFrame(callback);

引数	説明
callback	次の再描画のためにアニメーションを更新する際に呼び出す関数を指定します。このコールバックは、DOMHighResTimeStampの引数を1つだけ受け取り、これは`requestAnimationFrame`がコールバックを発火した際の時間を示します。
戻り値
requestID	`requestID`はlong型の一意の数値で、コールバックリストの項目(entry)を識別します。この値がゼロになることはなく、またこの値を想定することは出来ません。この値をwindow.cancelAnimationFrame()に渡すことで、コールバック要求をキャンセルすることが出来ます。

例

window.requestAnimationFrame =
  window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;

var start = null;
var d = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  var progress;
  if (start === null) start = timestamp;
  progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

ブラウザ互換性

デスクトップ
機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	10.0 [webkit] 24.0	4.0 [moz] [1] 23 [2]	10.0	◯ [-o] 15.0	6.0 [webkit] 6.1
戻り値	23.0	11.0 (11.0)	10.0	◯	◯

モバイル
機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	4.4	16.0[webkit]	?	?	14.0	7.0 6.0[webkit]
戻り値	?	?	11.0 (11.0)[moz]	?	?	?

Geckoの注意事項

[1] Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)以前は、 mozRequestAnimationFrame()は引数無しで呼び出すことが可能でした。標準の一部になりそうにないため、現在これはサポートされていません。

[2] このメソッドが接頭辞付きのバージョンで使用された場合、コールバック引数は、 DOMHighResTimeStampの代わりに、 DOMTimeStampになります。 DOMTimeStampはミリ秒の精度のみを持ちますが、 DOMHighResTimeStampの最小精度は10マイクロ秒になります。

Chromeの注意事項

Chromeで要求をキャンセルする正しい呼び出しは、現在ではwindow.cancelAnimationFrame()になります。古いバージョンではwindow.webkitCancelAnimationFrame()と、 window.webkitCancelRequestAnimationFrame()が非推奨になりましたが、まだ今のところサポートされています。

仕様

Timing control for script-based animations: requestAnimationFrame[WD]