Window.requestAnimationFrame()

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');

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

window.requestAnimationFrame(step);

メモ

Edge のバージョン17以前と Internet Explorer は、描画サイクルの前に requestAnimationFrame を確実に発行するとは限りません。

仕様書

仕様書 状態 備考
HTML Living Standard
requestAnimationFrame の定義
現行の標準 変更なし、以前のものを置き換える
Timing control for script-based animations
requestAnimationFrame の定義
廃止された 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
requestAnimationFrameChrome 完全対応 24
完全対応 24
完全対応 10
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 23
補足
完全対応 23
補足
補足 Callback parameter is a DOMHighResTimestamp. This means ten microsecond precision and zero time as performance.now().
未対応 11 — 42
接頭辞付き 補足
接頭辞付き moz のベンダー接頭辞が必要
補足 Callback parameter is a DOMTimestamp. This means millisecond precision and zero time as Date.now().
未対応 4 — 11
接頭辞付き 補足
接頭辞付き moz のベンダー接頭辞が必要
補足 Could be called with no input parameters.
IE 完全対応 10Opera 完全対応 15
完全対応 15
未対応 ? — 15
接頭辞付き
接頭辞付き o のベンダー接頭辞が必要
Safari 完全対応 6.1
完全対応 6.1
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 25
完全対応 25
完全対応 18
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 23
完全対応 23
未対応 14 — 42
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 14
完全対応 14
未対応 ? — 14
接頭辞付き
接頭辞付き o のベンダー接頭辞が必要
Safari iOS 完全対応 7.1
完全対応 7.1
完全対応 6.1
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
Return valueChrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 11IE 完全対応 10Opera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ありChrome Android 完全対応 25Firefox Android 完全対応 14Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報