js request Animation Frame

1314 ワード

request AnimationFrameを参考にして、ウェブでアニメーションを書くもう一つの選択肢はCSS 3アニメのように強いです.request AnimationFrameは毛糸用がありますか?
window.request Animation Frameを書くと、ブラウザは次の絵を描く前にコールバック関数を実行します.私たちはそれを使って一貫した一コマずつのアニメーションを作ることができます.たとえば:
function render(){
     //          
     requestAnimationFrame(render);
}

render();
request Animation Frame方法がない前に、私達はsetTimeoutまたはset Intervalで類似の効果を実現するしかありません.
function render(){
     //          
    setTimeout(render, 1000/60);//         60 
}

render();
このように書いてある問題は、ブラウザが毎秒60フレームでないとフレームが外れてしまうということです.また、性能については、ブラウザがタブページ/ウィンドウにあるときに非アクティブ状態(ウィンドウ最小化やタブページの切り替えなど)になると、request Animation Frameは実行されず、set Timeout/set Intervalは実行されない.
以下はCSS 3のアニメを参考にしてそんなに強くて、request AnimationFrameは毛糸用がありますか?
建国記念日の北京高速は最大16.7 sごとに1台の車を通して、結果、突然いくつかのsetTimeoutの軍用車を挿入して、強制的に10 sを通します.明らかに、これは超負荷で、順調に進行するには、3台目の車を直接になくすしかないです.しかし、これは現実的ではないので、渋滞することができます!
同様に、ディスプレイ16.7 msのリフレッシュ間隔の前に他の描画要求(setTimeout)が発生し、すべての第3のフレームが失われ、アニメーションの断続的表示(渋滞の感じ)を引き起こし、これは過剰な描画による問題である.このようなタイマ周波数の低下は電池の寿命にも悪影響を及ぼし、他の用途の性能を低下させる.
これは、なぜsetTimeoutのタイマー値が、16.7 msの最小使用を推奨するのか(16.7=1000/60、すなわち、毎秒60フレーム)である.
私はこのために現れたのです.私がやっていることは簡単です.ブラウザの絵を見ながら歩くと、ブラウズ設備の描画間隔が16.7 msなら、この間隔で描きます.ブラウズデバイスの描画間隔が10 msなら、10 msで描画します.これでは描きすぎの問題はなく、アニメはコマが落ちないので、自然と流れがいいです.