コアポイント

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

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

window.requestAnimationFrame(callbackFunction);

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

ブラウザ互換性処理

現(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é)を使用して動(dòng)的にプロパティ名を構(gòu)築しているため、四角いブラケット表記を使用します。ブラウザがサポートしていない場(chǎng)合、60ミリ秒後に呼び出して同様の効果を達(dá)成する通常の関數(shù)に戻ります。

setTimeout

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

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

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

window.requestAnimationFrame(callbackFunction);

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

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

アニメ関數(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) {       // 如果剩余時(shí)間少于 60 毫秒，則在此結(jié)束動(dòng)畫
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 執(zhí)行一些動(dòng)畫操作
    }

    _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 = 進(jìn)度為 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}

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

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

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

アニメーションが最初に実行された場(chǎng)合、

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

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

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

コード最適化

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

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

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 = 進(jìn)度為 100%

      item = list.shift();  // 獲取下一個(gè)項(xiàng)目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 進(jìn)度為 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 緩動(dòng)公式
      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を使用したシンプルなアニメーションの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。