コアポイント

• requestAnimationFrameは、ブラウザの描畫サイクルと同期したアニメーションの書き込みに使用されるヘルパー関數(shù)であり、それにより、よりスムーズでCPUを節(jié)約するアニメーション効果を?qū)g現(xiàn)します。すべての最新のブラウザでサポートされており、古いブラウザーと互換性があります。
• requestAnimationFrame animateを使用して作成された関數(shù)は、一連の関數(shù)をパラメーターとして受け入れるように設(shè)計できます。これは、シーケンスで呼び出され、アニメーションシーケンスを?qū)g裝します。この関數(shù)は、アニメーションの進行狀況を追跡し、アニメーションの終了時間を計算できます。
• requestAnimationFrameブラウザのリフレッシュレートと同期して動作するため、setTimeoutまたはsetIntervalよりも効率的にアニメーションを作成します。 JavaScriptフレームワークまたはライブラリで使用でき、CSSプロパティ、キャンバスアニメーション、SVGアニメーション、スクロールまたはユーザーインタラクションベースのアニメーションなど、さまざまなアニメーションを処理できます。

dom要素アニメーションでは、數(shù)ミリ秒ごとにCSSスタイルを変更して、動きの幻想を作成します。これは、コールバック関數(shù)をsetTimeoutに渡し、そのコールバック関數(shù)のノードのスタイルオブジェクトを変更することを意味します。次に、もう一度setTimeoutを呼び出して、次のアニメーションフレームをキューアップします。 requestAnimationFrameこの新しいヘルパー関數(shù)は、アニメーションのために生まれました。最初はFirefox 4で見られ、IE 10を含むすべてのブラウザに徐々に採用されています。幸いなことに、古いブラウザと互換性があるのは簡単です。

window.requestAnimationFrame(callbackFunction);

setTimeout（指定された時間遅延の後に実行）とは異なり、ブラウザが次回畫面を描畫するときにrequestAnimationFrameコールバック関數(shù)を?qū)g行します。これにより、ブラウザの描畫サイクルと同期できるため、あまり頻繁に描畫しないか、頻繁に頻繁に描畫しないようになります。つまり、アニメーションは非常にスムーズで、CPUに過負荷になりません。

ブラウザ互換性処理

現(xiàn)在、すべてのブラウザにはrequestAnimationFrameの接頭辭付きバージョンがあります。そのため、どのバージョンがサポートされているかを検出して參照しましょう。

var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");

正方形のブラケット表記を使用して、ウィンドウオブジェクトのプロパティにアクセスする方法に注意してください。文字列の連結(jié)を使用して動的にプロパティ名を構(gòu)築しているため、四角いブラケット表記を使用します。ブラウザがサポートしていない場合、60ミリ秒後に呼び出して同様の効果を達成する通常の関數(shù)に戻ります。

setTimeout

アニメーション関數(shù)構(gòu)造

次に、アニメーションをシミュレートするために

を繰り返し呼び出す単純な関數(shù)を構(gòu)築しましょう。アニメーションを?qū)g裝するには、繰り返し呼ばれるエントリポイントと內(nèi)部関數(shù)（ステップ関數(shù)と呼ばれる）として外部関數(shù)が必要です。

window.requestAnimationFrame(callbackFunction);

ステップ関數(shù)を呼び出すたびに、アニメーションの進行狀況を追跡して、いつ終了するかを知る必要があります。アニメーションが終了する時間を計算し、各サイクルの殘りの時間に基づいて進行狀況を計算します。

var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");

new Date()を使用して、現(xiàn)在の時間をミリ秒?yún)g位で取得していることに注意してください。プラス記號は、日付オブジェクトを數(shù)値データ型にキャストします。 rate変數(shù)は0?1の數(shù)値であり、アニメーションの進行率を示しています。

アニメ関數(shù)の改善

関數(shù)の入力と出力を考慮する必要があります。関數(shù)が関數(shù)と持続時間をパラメーターとして受け入れるようにしましょう。

function animate() {
  var step = function() {
    _requestAnimationFrame(step);
  }
  step();
}

このようにこの関數(shù)を呼び出すことができます：

function animate() {
  var duration = 1000 * 3,  // 3 秒
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {       // 如果剩余時間少于 60 毫秒，則在此結(jié)束動畫
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 執(zhí)行一些動畫操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

run関數(shù)では、ノードの幅を「100px」から「300px」にアニメーション化するコードを配置します。

function animate(item) {
  var duration = 1000 * item.time,
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      item.run(1);  // 1 = 進度為 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}

アニメーション関數(shù)の改善

正常に動作しますが、私が本當に望んでいるのは、順番に呼ばれる関數(shù)の配列を入力できることです。このようにして、最初のアニメーションが終了した後、2番目のアニメーションが開始されます。配列をスタックとして扱い、アイテムを一度に1つずつポップします。入力を変更しましょう：

animate({
  time: 3,  // 以秒為單位的時間
  run: function(rate) { /* 使用 rate 執(zhí)行某些操作 */ }
});

アニメーションが最初に実行された場合、

はnullで、itemは60ミリ秒未満なので、アレイから最初のアイテムをポップして実行を開始します。アニメーションの最後のフレームでは、remainingも60未満なので、現(xiàn)在のアニメーションを完了し、次のアイテムを配列からポップアップして、次のアイテムをアニメーション化します。また、私は緩和式を通じてremaining値を渡したことに注意してください。 0?1の値は、立方體の割合で成長し、硬く見えます。アニメーション関數(shù)を呼び出すために、次のことを行います。 rate

最初にボックスの幅が展開し、2秒かかり、高さが拡大し、2秒かかることに注意してください。

animate({
  time: 3,
  run: function(rate) {
    document.getElementById("box").style
      .width = (rate * (300 - 100) + 100) + "px";
  }
});

コード最適化

コードを少しクリーンアップしましょう。何度か

を呼び出すことに注意してください。これはあまり良くありません。キャッシュしてキャッシュして、開始値と終了値をキャッシュしながらキャッシュしましょう。

getElementById

function animate(list) {
  var item,
      duration,
      end = 0;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      if (item) item.run(1);  // 1 = 進度為 100%

      item = list.shift();  // 獲取下一個項目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 進度為 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 緩動公式
      item.run(rate);
    }

    _requestAnimationFrame(step);
  };
  step();
}

関數(shù)は常に自己完結(jié)型のオブジェクトの一部であり、

変數(shù)を介してオブジェクトのすべてのプロパティにアクセスできるため、メイン関數(shù)を変更する必要はないことに注意してください。これで、ステップ関數(shù)を?qū)g行するたびに、すべての変數(shù)をキャッシュします。それでおしまい。 runを利用し、古いブラウザーにフォールバックを提供するシンプルなアニメーションヘルパー関數(shù)。 this requestAnimationFrame

（この環(huán)境でJavaScriptコードを?qū)g行できないため、スクリプトデモパーツは省略されています。

（コンテンツが元のテキストから高度に複製されているため、擬似オリジナルを完了するためにコアポイントを維持するだけであるため、単純なアニメーションにrequestAnimationFrameを使用するFAQセクションも省略されています。）

以上がRequestAnimationFrameを使用したシンプルなアニメーションの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。