window.requestAnimationFrame

概要

window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。

このメソッドはスクリーン上でアニメーションが更新できる準備が整ったとき、いつでも呼び出すべきです。これにより、ブラウザにアニメーション関数を次の再描画を実行される前に呼び出すことを要求します。この再描画はフォアグラウンドのタブでおよそ毎秒60回行われるとされています。しかし、バックグラウンドのタブではより少ない割合に減らされるでしょう。

コールバックメソッドは引数をひとつ受け取ります。この引数は再描画が行われた時間を示します。

構文

requestID = window.mozRequestAnimationFrame(callback);    // Firefox
requestID = window.requestAnimationFrame(callback);       // IE 10 / Chrome
requestID = window.webkitRequestAnimationFrame(callback); // Safari

引数

callback

次の再描画のために、アニメーションを更新するときに呼び出す関数を指定します。

戻り値

コールバックのリストから入力を識別するための一意の倍精度整数 requestID を返します。この値は非ゼロ値ですが、値そのものを推定することはできないでしょう。この値を window.cancelAnimationFrame() に渡すことで、コールバック関数の更新を中止することができます。

例

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = window.mozAnimationStartTime;  // Firefoxのみ対応している関数です。 その他のブラウザでは Date.now() などの関数を使うことができます。

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

requestAnimationFrame(step);

ブラウザ実装状況

Gecko に関する注記

Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 以前において、 mozRequestAnimationFrame() を引数なしで呼ぶことができました。この仕様は標準の一部となるにはとして適切ではないため、現在対応していません。

Google Chrome に関する注記

現在の Google Chrome でリクエストを中止する関数の正しい呼び出し方は window.webkitCancelAnimationFrame() です。それ以前のバージョンでは window.webkitCancelRequestAnimationFrame() でしたが、こちらは非推奨ですが現在でも対応しています。

仕様

Timing control for script-based animations: requestAnimationFrameWD

関連情報

• window.mozAnimationStartTime
• window.cancelAnimationFrame()
• mozRequestAnimationFrame - Blog post
• requestAnimationFrame for smart animating - Blog post
• Animating with javascript: from setInterval to requestAnimationFrame - Blog post
• Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - Blog post