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 がコールバックの呼び出しを開始した現在時刻 ( 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 の定義		 廃止された 初期定義

ブラウザーの実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

24

10 webkit

あり

231

11 — 42 moz 2

4 — 11 moz 3

10

15

あり o

6.1

6 webkit

Return value23 あり1110156.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり

25

18 webkit

あり

23

14 — 42 moz

15

7.1

6.1 webkit

?
Return value あり25 あり14156.1 ?

1. Callback parameter is a DOMHighResTimestamp. This means ten microsecond precision and zero time as performace.now().

2. Callback parameter is a DOMTimestamp. This means millisecond precision and zero time as Date.now().

3. Could be called with no input parameters.

関連情報

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

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