.requestAnimationFrame()

この関数はアニメーションの実行と、次の再描画の前にアニメーションを更新する指定した関数を呼び出す事を、ブラウザに伝えます。 このメソッドは、再描画の前に実行されるコールバックを引数として取得します。

注意: もし次の再描画で別のフレームをアニメーションしたいのであれば、 コールバックのランタイム自身がrequestAnimationFrame()を呼びださなければいけません。

アニメーション画面の更新を開始する際は、このメソッドを呼び出さなければいけません。 このメソッドは、ブラウザが次の再描画を実行する前に、指定したアニメーション関数を呼び出すように要求します。 コールバックの回数は通常は1秒間に60回ですが、 多くのWebブラウザは一般的にはW3Cの勧告に従った表示リフレッシュレートに一致します。 バックグラウンド(非アクティブ)のタブで実行される場合、 コールバックのレートは低く抑えられる可能性があります。

コールバックのメソッドは、 DOMHighResTimeStampの引数を1つだけ渡され、 これには、requestAnimationFrameの発火が開始されコールバックがキューに登録された際の時間データが格納されています。 単一のフレーム内に複数のコールバックがあるため、 それぞれが直前のコールバックの処理中に時間を渡されたとしても、 同じタイムスタンプを受け取ります。(翻訳に自信なし) このタイムスタンプはミリ秒単位の10進数で、最小精度は10マイクロ秒になります。

文法

// Firefox 23 / IE 10 / Chrome / Safari 7 (iOS含む)
requestID = window.requestAnimationFrame(callback);

// Firefox < 23
requestID = window.mozRequestAnimationFrame(callback);

// Safariの古いバージョン / Chrome
requestID = window.webkitRequestAnimationFrame(callback);
引数 説明
callback 次の再描画のためにアニメーションを更新する際に呼び出す関数を指定します。 このコールバックは、DOMHighResTimeStampの引数を1つだけ受け取り、 これはrequestAnimationFrameがコールバックを発火した際の時間を示します。
戻り値
requestID requestIDはlong型の一意の数値で、コールバックリストの項目(entry)を識別します。 この値がゼロになることはなく、またこの値を想定することは出来ません。 この値をwindow.cancelAnimationFrame()に渡すことで、 コールバック要求をキャンセルすることが出来ます。

window.requestAnimationFrame =
  window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;

var start = null;
var d = document.getElementById("SomeElementYouWantToAnimate");

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

requestAnimationFrame(step);

ブラウザ互換性

デスクトップ
機能 Chrome Firefox
(Gecko)
IE Opera Safari
基本 10.0 [webkit]
24.0
4.0 [moz] [1]
23 [2]
10.0 ◯ [-o]
15.0
6.0 [webkit]
6.1
戻り値 23.0 11.0 (11.0) 10.0
モバイル
機能 Android Chrome for
Android
Firefox
Mobile
IE
Mobile
Opera
Mobile
Safari
Mobile
基本 4.4 16.0[webkit] ? ? 14.0 7.0
6.0[webkit]
戻り値 ? ? 11.0 (11.0)[moz] ? ? ?

Geckoの注意事項

[1] Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)以前は、 mozRequestAnimationFrame()は引数無しで呼び出すことが可能でした。 標準の一部になりそうにないため、現在これはサポートされていません。

[2] このメソッドが接頭辞付きのバージョンで使用された場合、コールバック引数は、 DOMHighResTimeStampの代わりに、 DOMTimeStampになります。 DOMTimeStampはミリ秒の精度のみを持ちますが、 DOMHighResTimeStampの最小精度は10マイクロ秒になります。

Chromeの注意事項

Chromeで要求をキャンセルする正しい呼び出しは、現在ではwindow.cancelAnimationFrame()になります。 古いバージョンではwindow.webkitCancelAnimationFrame()と、 window.webkitCancelRequestAnimationFrame()が非推奨になりましたが、 まだ今のところサポートされています。

仕様

Timing control for script-based animations: requestAnimationFrame[WD]

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。