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 の定義 |
廃止 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
Window.mozAnimationStartTime
Window.cancelAnimationFrame()
- mozRequestAnimationFrame - ブログ投稿
- requestAnimationFrame for smart animating - ブログ投稿
- Animating with javascript: from setInterval to requestAnimationFrame - ブログ投稿
- Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1 - ブログ投稿
- TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
- Paul Irish: requestAnimationFrame API: now with sub-millisecond precision