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

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

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

早速、古典的なアニメーション関数から始めましょう:

コードをコピーしますコードは次のとおりです:

 
function animate(element, name, from, to, time) { 
time = time || //デフォルトは 0.8 秒
var style = element.style, 
latency = 60, //60ms ごとに変更
count = time / latency, //変更の数
step = Math.round((to - from) / count), //各ステップの変化量
now = from; 
function go() { 
count--; 🎜>now = count ? now step : to; 
style[name] = now 'px'; 
setTimeout(go, latency); 
style [name] = from 'px'; 
setTimeout(go, latency); 

 
 この関数の設計上の制限に関係なく、単位は px でのみ設定できます。 スタイルを変更します。関数の実装だけの観点から見ると、これは非常に古典的なアニメーションの概念であり、その基本ロジックは次の部分で構成されます: 
 からの開始点の値と終了点の値、アニメーションに必要な時間、および各検出間の間隔 レイテンシー要件、値の変更回数と各変更ステップの量を計算します。 
setTimeout(fn, latency) を有効にして次の検出に進みます。 

次の検出では、属性ステップを一度設定します。アニメーションがまだ終了していない場合は、ステップ 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)の位置を計算し、スタイルを再割り当てします。
次のフレームのリクエストを続けます。

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

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

コードをコピー

コードは次のとおりです:

 
function animate(element, name, from, to, time) { 
time = time || デフォルトは 0.8 秒 
var style = element.style, 
startTime = new Date; 
function go(timestamp) { 
var progress = timestamp - startTime; 
if (progress >= period) { 
style[name] = to 
 return; 
} 
var now = (to - from) * (進行状況 / 期間) 
style[name] = now.toFixed() 'px'; 
requestAnimationFrame(go); 🎜>} 
style[name] = from 'px'; 
requestAnimationFrame(go); 
} 

 

この時点で、次の問題が残っています。すべてのブラウザが requestAnimationFrame 関数をサポートしているわけではないので、簡単な修正を行ってください。
Firefox の特性により、mozRequestAnimationFrame が提供する最高 FPS は 60 であり、各フレームの計算時間に応じて調整されます。たとえば、各フレームの計算に 1 秒かかる場合、1FPS しか提供されません。アニメーション効果。
Chrome の上位バージョンでも、webkitRequestAnimationFrame と呼ばれるこの機能が実装されています。将来、Opera の oRequestAnimationFrame と IE の msRequestAnimationFrame が登場することが予想されます。そのため、簡単な互換性プロセスを次に示します:

コードをコピーしますコードは次のとおりです:

requestAnimationFrame = window.requestAnimationFrame || 
window.mozRequestAnimationFrame || .webkitRequestAnimationFrame || 
window.oRequestAnimationFrame || 
function(callback, 1000 / 60) };

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

関連記事