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 の定義
廃止された 初期定義

ブラウザーの実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 24
完全対応 24
完全対応 10
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 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
完全対応 あり
接頭辞付き
接頭辞付き o のベンダー接頭辞が必要
Safari 完全対応 6.1
完全対応 6.1
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 25
完全対応 25
完全対応 18
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge Mobile 完全対応 ありFirefox Android 完全対応 23
完全対応 23
未対応 14 — 42
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 15Safari iOS 完全対応 7.1
完全対応 7.1
完全対応 6.1
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android ?
Return valueChrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 11IE 完全対応 10Opera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ありChrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android 完全対応 15Safari iOS 完全対応 6.1Samsung Internet Android ?

凡例

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

関連情報

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

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