requestAnimationFrame関数の緩和でブラウザアニメーションの実装が改善_基礎知識

function callback(time) {
window.mozRequestAnimationFrame(callback);
doWork();


doWork() に 1000/60 ミリ秒かかる場合、フレーム レートは約 30 fps となり、同じアニメーションで setTimeout(callback, 16) を使用する場合、フレーム レートは 60 fps になります。コールバックは、コールバックの実行開始から 16 ミリ秒後ではなく、常に約 16 ミリ秒後に再度実行を開始するようです。後者の場合、計算が十分に高速であれば、60 fps フレームを生成できます。
標準コントロールの場合、ポータルはここにあります



早速、古典的なアニメーション関数から始めましょう:
次の検出では、属性ステップを一度設定します。アニメーションがまだ終了していない場合は、ステップ 2 に戻って次の検出を続けます。
この関数は非常にうまく機能し、何千ものサイトやシステムにサービスを提供しています。実際、jQuery の animate 関数の中核は setInterval 関数に他なりません。
しかし、現在のシステムの複雑さが着実に増加するにつれて、アニメーション効果がますます多くなり、アニメーションの滑らかさにさらに注意が払われるようになり、上記の機能にいくつかの問題が生じています。たとえば、上記の関数に従って 100 個のアニメーション効果を同時にオンにした場合、100 個のタイマーが同時に実行されることは明らかであり、これらのタイマー間のスケジュールはパフォーマンスにわずかな影響を与えます。通常の環境では、このような小さな効果は問題になりませんが、アニメーションなどの滑らかさが要求される環境では、わずかな影響がユーザー エクスペリエンスを悪化させる可能性があります。

そのような状況下で、一部の開発者は、タイマーを使用してアニメーション フレームをトリガーし、複数のアニメーション プロパティの変更を処理するためにこれらのフレームを登録します。この利点は、タイマー スケジュールのオーバーヘッドが軽減されることですが、アニメーション フレームワーク開発者にとっては、フレームを監視するための統合フレーム管理と API を開発および保守する必要があります。


ブラウザーの直接サポート

最終的に、ブラウザーのメーカーは、これが実際に自社で実行できることを発見し、ブラウザーのレベルに基づいて、さらに最適化できることがわかりました。たとえば、次のとおりです。
1 つの調査における DOM 上のすべての操作について、レイアウトとペイントは 1 回だけ実行されます。
アニメーション要素が非表示の場合、ペイントは実行されません。 その結果、ブラウザは requestAnimationFrame と呼ばれる API を起動するようになりました。この関数については、MDC の関連ページに詳しく説明されています。簡単に言うと、この関数を使用するには次の 2 つの方法があります。 requestAnimationFrame 関数を呼び出す。コールバック パラメータを渡すと、次のアニメーション フレームでコールバックが呼び出されます。
パラメータを渡さずにこの関数を直接呼び出してアニメーションフレームを開始すると、次のフレームがトリガーされると同時に window.onmozbeforepaint イベントがトリガーされます。このイベントを登録することでアニメーションを実行できます。

2 番目の方法は Firefox 独自のイベントに依存しており、beforepaint イベントはまだ標準に入っていないため、1 番目の方法を使用することをお勧めします。この時点で、アニメーション ロジックは次のようになります:
アニメーションの開始時刻として現在の時刻 startTime を記録します。
コールバック関数を使用して次のフレームをリクエストします。
次のフレームがトリガーされると、コールバック関数の最初のパラメーターは現在時刻であり、これが startTime と比較されて時間間隔 ellapseTime が決定されます。
ellapseTime が設定されたアニメーション時間を超えているかどうかを判断し、超えている場合はアニメーションを終了します。
アニメーション属性の変更の差分 = から - を計算し、ellapseTime = Different / time * ellapseTime の間にどのくらいのステップが変化するかを決定します。
現在変更すべきMath.round(from step)の位置を計算し、スタイルを再割り当てします。
次のフレームのリクエストを続けます。


新しいアニメーション関数

以下は新しいアニメーション関数です:


コードをコピー