window.requestAnimationFrameの意味と使い方_基礎知識-jsチュートリアル-php.cn

window.requestAnimationFrameの意味と使い方_基礎知識

WBOY

リリース： 2016-05-16 17:43:49

オリジナル

2142 人が閲覧しました

他の人によるパーティクルエフェクトの実装を見ると、次のコードが含まれていることがわかります:

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

 
window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame 
|| window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
function(callback, element) { 
return window.setTimeout(function() { 
return callback( new Date()); 
}, 1000 / 60) 
}); >
 

これはどういう意味で、どのように使われますか? window.requestAnimationFrame は、実行したいアニメーションをブラウザーに伝え、次のアニメーションフレームでウィンドウを再描画するようにブラウザーに要求します。このメソッドは、ブラウザが再描画する前にコールバック関数として呼び出されます。
画面を更新するときにこのメソッドを呼び出すようにブラウザに指示します。

window.requestAnimationFrame の過去と現在の生活: 1990 年代、インターネット広告の時代、ウィンドウ上のさまざまな回転ドアやさまざまなステータステキストは setTimeout を使用して実装されました。

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

(function(){ 
 function update(){ 
setTimeout(update,1000) 
} 
setTimeout(update,1000) 
})(); update() { 
// 
} 
setInterval(update,1000) 
})(); 

 
アニメーションで最も難しい問題は遅延問題です。モニターの場合、たとえば、1 秒あたり 60 フレームの場合、ブラウザのリフレッシュ レートに従ってアニメーション時間を制御すると、17 ミリ秒、setTimeout (コールバック、1000/60) という良い効果が得られますが、次のことが起こります。
1.各ブラウザのリアルタイム精度は異なります。 

2. setTimeout と setInterval の実装メカニズムは必要なものではありません。現時点で UI スレッドが非常にビジーである場合、ブラウザーはコードのその部分を UI 描画キューに追加します。タスクがブロックされた場合、アニメーションの次のフレームは時間通りに実行されません。長期間にわたって累積すると、元の時点から逸脱する可能性があり、誤差はますます大きくなります。

Mozilla の Robert O’Callahan はこの問題について考え、独自の解決策を考え出しました。 CSS トランジションとアニメーションの利点は、ブラウザーがどのアニメーションが発生するかを認識しているため、適切な間隔で UI を更新できることだと彼は指摘しました。 JavaScript アニメーションの場合、ブラウザはアニメーションが発生していることを認識しません。彼の解決策は、実行されている JavaScript コードをブラウザに伝える mozRequestAnimationFrame() メソッドを作成することでした。これにより、コードの実行後にブラウジングを最適化できるようになります。

mozRequestAnimationFrame() メソッドはパラメーターを受け取ります。これは、画面が再描画される前に呼び出される関数です。この関数は、適切な DOM スタイルの変更を生成するために使用され、これらの変更は次の再描画で使用されます。 setTimeout() と同じ方法で mozRequestAnimationFrame() への呼び出しを連鎖させることができます。
これは window.requestAnimationFrame の起源です。

Mozilla 公式 Web サイトの以下を参照してください。

このテクノロジーの仕様はまだ安定していないため、さまざまなブラウザーで使用する適切なプレフィックスについては互換性表を確認してください。また、構文にも注意してください。実験的なテクノロジの動作は、仕様の変更に応じてブラウザの将来のバージョンで変更される可能性があります。このテクノロジの仕様はまだ安定していないため、使用する正しいプレフィックスはさまざまなブラウザの互換性テーブルに記載されています。また、実験的手法の構文と動作は、ブラウザ仕様の将来のリリースで変更される可能性があることにも注意してください。
現在、Android システムではサポートされていないため、アニメーションは setTimeout のみ可能です。