検索結果

    window.requestAnimationFrame

    概要

    window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。

    注記: 次の再描画で、別のフレームを再描画させたいときは、コールバックメソッド自身で requestAnimationFrame()を呼ばなければなりません。

    このメソッドはスクリーン上でアニメーションが更新できる準備が整ったとき、いつでも呼び出すべきです。これにより、ブラウザにアニメーション関数を次の再描画を実行される前に呼び出すことを要求します。この再描画はフォアグラウンドのタブでおよそ毎秒60回行われるとされています。しかし、バックグラウンドのタブではより少ない割合に減らされるでしょう。

    コールバックメソッドは引数をひとつ受け取ります。この引数は再描画が行われた時間を示します。

    構文

    requestID = window.mozRequestAnimationFrame(callback);    // Firefox
requestID = window.requestAnimationFrame(callback);       // IE 10 / Chrome
requestID = window.webkitRequestAnimationFrame(callback); // Safari

    引数

    callback
    次の再描画のために、アニメーションを更新するときに呼び出す関数を指定します。

    戻り値

    コールバックのリストから入力を識別するための一意の倍精度整数 requestID を返します。この値は非ゼロ値ですが、値そのものを推定することはできないでしょう。この値を window.cancelAnimationFrame() に渡すことで、コールバック関数の更新を中止することができます。

    例

    (function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var start = window.mozAnimationStartTime;  // Firefoxのみ対応している関数です。 その他のブラウザでは Date.now() などの関数を使うことができます。

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

requestAnimationFrame(step);

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 10.0 webkit
    24.0    		 4.0 moz
    23    		 10.0
    • -o- (有)
    • 15.0
    		 6.0 webkit
    unprefixed in nightlies
    requestID return value 24.0
    23.0 webkit    		 11.0 (11.0) moz 10.0
    • -o- (有)
    • 15.0
    		 未サポート
    unprefixed in nightlies
    機能 Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート 未サポート 10.0 webkit

    0.16 webkit

    		 ? ? 14.0 6.0 webkit
    requestID return value ?   ? 11.0 (11.0) moz ? ? ?

    Gecko に関する注記

    Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 以前において、 mozRequestAnimationFrame() を引数なしで呼ぶことができました。この仕様は標準の一部となるにはとして適切ではないため、現在対応していません。

    Google Chrome に関する注記

    現在の Google Chrome でリクエストを中止する関数の正しい呼び出し方は window.webkitCancelAnimationFrame() です。それ以前のバージョンでは window.webkitCancelRequestAnimationFrame() でしたが、こちらは非推奨ですが現在でも対応しています。

    仕様

    Timing control for script-based animations: requestAnimationFrameWD

    関連情報

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

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