requestAnimationFrameはタイマーに等しい
2714 ワード
1、requestAnimationFrame私たちの県でこの新しいアニメーションの作り方を学びましょう
HTML 5/CSS 3時代、私たちはwebでアニメーションの選択をしなければなりません.実はもうたくさんあります.CSS 3のanimation+keyframesを使うことができます.css 3のtransitionも使えますまた、canvas上で図を描くことでアニメーションを実現したり、jQueryアニメーション関連のAPIを借りて容易に実現したりすることもできます.もちろん最も原始的なあなたはwindowを使うことができます.settimout()またはwindow.setInterval()は、要素の状態位置などを更新し続けることでアニメーションを実現し、画面の更新頻度が毎秒60回に達してこそ、肉眼でスムーズなアニメーション効果を見ることができることを前提としています.今また1種のアニメーションの方案を実現して、それはまだ草案の中のwindowです.requestAnimationFrame()メソッド.
2、window.requestAnimationFrame()は、次のアニメーションの前に画面を更新するために適切な方法を呼び出す必要があることをブラウザに通知します.この方法はwindowに伝えることです.requestAnimationFrame()のコールバック関数.
この方法の原理はsettimeout/setIntervalとあまり差がなく、同じ方法を再帰的に呼び出すことで画面を更新し続け、動く効果を達成します.
3、requestAnimationFrameはsettimout、setIntervalより優勢は主に2点ある.
1、requestAnimationFrameは、各フレームのすべてのDOM操作を集中させ、1回の再描画または還流で完了し、再描画または還流の時間間隔はブラウザのリフレッシュ周波数にしっかりと追従し、一般的には、この周波数は毎秒60フレームである.2、非表示または非表示の要素では、requestAnimationFrameは再描画または還流されません.これは、もちろん、より少ないcpu、gpu、メモリ使用量を意味します.3、settimeout/setIntervalより優れているところは、ブラウザがアニメーション専用のAPIであり、実行時にブラウザがメソッドの呼び出しを自動的に最適化し、ページがアクティブでない場合、アニメーションが自動的に一時停止し、CPUのオーバーヘッドを効果的に節約することである.
例を挙げてrequestAnimationFrameの強さを証明しましょう!
HTML 5/CSS 3時代、私たちはwebでアニメーションの選択をしなければなりません.実はもうたくさんあります.CSS 3のanimation+keyframesを使うことができます.css 3のtransitionも使えますまた、canvas上で図を描くことでアニメーションを実現したり、jQueryアニメーション関連のAPIを借りて容易に実現したりすることもできます.もちろん最も原始的なあなたはwindowを使うことができます.settimout()またはwindow.setInterval()は、要素の状態位置などを更新し続けることでアニメーションを実現し、画面の更新頻度が毎秒60回に達してこそ、肉眼でスムーズなアニメーション効果を見ることができることを前提としています.今また1種のアニメーションの方案を実現して、それはまだ草案の中のwindowです.requestAnimationFrame()メソッド.
2、window.requestAnimationFrame()は、次のアニメーションの前に画面を更新するために適切な方法を呼び出す必要があることをブラウザに通知します.この方法はwindowに伝えることです.requestAnimationFrame()のコールバック関数.
この方法の原理はsettimeout/setIntervalとあまり差がなく、同じ方法を再帰的に呼び出すことで画面を更新し続け、動く効果を達成します.
3、requestAnimationFrameはsettimout、setIntervalより優勢は主に2点ある.
1、requestAnimationFrameは、各フレームのすべてのDOM操作を集中させ、1回の再描画または還流で完了し、再描画または還流の時間間隔はブラウザのリフレッシュ周波数にしっかりと追従し、一般的には、この周波数は毎秒60フレームである.2、非表示または非表示の要素では、requestAnimationFrameは再描画または還流されません.これは、もちろん、より少ないcpu、gpu、メモリ使用量を意味します.3、settimeout/setIntervalより優れているところは、ブラウザがアニメーション専用のAPIであり、実行時にブラウザがメソッドの呼び出しを自動的に最適化し、ページがアクティブでない場合、アニメーションが自動的に一時停止し、CPUのオーバーヘッドを効果的に節約することである.
例を挙げてrequestAnimationFrameの強さを証明しましょう!
Examples
//
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitrequestAnimationFrame ||
window.mozrequestAnimationFrame ||
window.msrequestAnimationFrame ||
window.orequestAnimationFrame;
window.cancelAnimationFrame =
window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.msCancelAnimationFrame ||
window.oCancelAnimationFrame;
// box
var box = document.querySelector("#box");
//
var _id = window.requestAnimationFrame(run);
console.log(_id)
// 60
function run(time){
// console.log(time);
var width = parseFloat(getComputedStyle(box).width);
if(width>=600){
window.cancelAnimationFrame(_id);
}else{
window.requestAnimationFrame(run);
box.style.width = width + 1 + "px";
}
}