window.requestAnimationFrame

by 3 contributors:

概要

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

注記: 次の再描画で、別のフレームを再描画させたいときは、コールバックメソッド自身で 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);

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 10.0 webkit
24.0
4.0 moz
23
10.0
  • -o- (有)
  • 15.0
6.0 webkit
unprefixed in nightlies
requestID return value 24.0
23.0 webkit
11.0 (11.0) moz 10.0
  • -o- (有)
  • 15.0
未サポート
unprefixed in nightlies
機能 Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート 10.0 webkit

0.16 webkit

? ? 14.0 6.0 webkit
requestID return value ?   ? 11.0 (11.0) moz ? ? ?

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

関連情報

ドキュメントのタグと貢献者

Contributors to this page: teoli, yuxxxx, ethertank
最終更新者: teoli,
サイドバーを隠す