window.requestAnimationFrame

ここへジャンプ:
  1. 構文
  2. 例
  3. 仕様
  4. ブラウザーの実装状況
  5. 関連情報


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

注記: 次の再描画時に別のフレームをアニメーションさせたいときは、コールバックルーチン自身で requestAnimationFrame() を呼ばなければなりません。

このメソッドは、いつでも画面上でアニメーションの更新準備が整った時に呼び出してください。これにより、ブラウザの次の再描画が実行される前にアニメーション関数が呼び出されることを要求します。このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。ただし、コールバックの確率は、バックグラウンドのタブや隠れた <iframe> では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。

コールバックメソッドには、1 個の引数 DOMHighResTimeStamp が渡されます。これは、requestAnimationFrame の発火開始によりコールバックがキューに追加された時点の現在時刻を示します。単一フレーム内で複数のコールバックがあり、前のコールバックで計算負荷が生じていいても、各コールバックは同じタイムスタンプを受け取ります。このタイムスタンプは、ミリ秒単位の十進数ですが、その最小精度は 1ms (1000 µs) です。

構文

window.requestAnimationFrame(callback);

引数

callback
次の再描画でアニメーションを更新する時に呼び出す関数を指定します。コールバックは 1 個の引数 DOMHighResTimeStamp を受け取ります。この引数は、requestAnimationFrame がコールバックの呼び出しを開始した現在時刻 ({domxref('performance.now()')}} から返された時刻) を示します。

戻り値

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

例

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

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

window.requestAnimationFrame(step);

仕様

仕様書 策定状況 備考
HTML Living Standard
requestAnimationFrame の定義		 現行の標準 変更なし、以前のものに代わる。
Timing control for script-based animations
requestAnimationFrame の定義		 勧告候補 初期定義

ブラウザーの実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 10 webkit
24 [3]		 4.0 moz [1][4]
23 [2]		 10.0 (有) o
15.0		 6.0 webkit
6.1
戻り値 23 11.0 (11.0) 10.0 15.0 6.1
機能 Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート

4.3 webkit
4.4

 4.3 webkit
4.4

11.0 (11.0) moz
23

 10.0 15.0

6.1 webkit
7.1

 18 webkit25 [3]
requestID 戻り値 4.4 4.4 11.0 (11.0) moz 10.0 15.0 6.1 webkit
7.1		 25

[1] Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 以前は、mozRequestAnimationFrame() 引数無しで呼び出すことができました。これは標準仕様の一部として適切ではないためサポートされません。

[2] 接頭辞付きのバージョンが使用された場合、コールバック引数が DOMHighResTimeStamp ではなく DOMTimeStamp になります。DOMTimeStamp はミリ秒単位の精度しかありませんが、DOMHighResTimeStamp は最小 10 マイクロ秒単位の精度を持ちます。さらに、0 タイムが異なります: DOMHighResTimeStamp は performance.now() と同じ 0 タイムですが、DOMTimeStamp は Date.now(). と同じ 0 タイムです。

[3] 現在 Chrome でリクエストを中止する関数の正しい呼び出しは、window.cancelAnimationFrame() を使用します。古いバージョンでは window.webkitCancelAnimationFrame() や window.webkitCancelRequestAnimationFrame() でした。これらは非推奨ですがまだサポートされています。

[4] 接頭辞付きバージョンのサポートは Firefox 42 で削除されました。

関連情報

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

タグ: 
 このページの貢献者: woodmix, Marsf, sohopro, teoli, yuxxxx, ethertank
 最終更新者: woodmix,