フロントエンド学習ノート--requestAnimationFrameアニメーション効果の最適化
1171 ワード
requestAnimationFrameは、その名の通りアニメーションフレームを要求し、html 5がアニメーションを要求するためのAPIを提供し、画面画面を更新する必要がある場合に呼び出すことができる. settimoutやsetIntervalとは異なり、requestAnimationFrameは時間間隔を必要とせず、requestAnimationFrameを使用するとブラウザはパラレルアニメーションを最適化し、コールバック関数が画面の毎回のリフレッシュ間隔で1回しか実行されないことを保証するため、アニメーション効果をよりスムーズに実行することができます. requestAnimationFrame()は、ブラウザの再描画前に呼び出されるコールバック関数をパラメータとして使用します.
example
example
css：
--------------------------------------
--------------------------------------
html：
--------------------------------------
js：
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';
function step(timestamp) {
// timestamp
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);