requestAnimationFrame（rAF）是實現(xiàn)網(wǎng)頁動畫流暢的核心機制，能自動同步頁面刷新節(jié)奏。相比setInterval，它根據(jù)頁面可見性和設備性能動態(tài)調(diào)整幀率，更高效省資源。使用時應：1. 利用時間戳控制動畫進度，確保勻速；2. 減少DOM操作，優(yōu)先使用CSS Transform和Opacity；3. 控制動畫複雜度，合理分配資源並降級低端設備效果。同時避免同步計算過多、注意清除循環(huán)及兼容性處理，才能做出平滑H5動畫。

網(wǎng)頁動畫要流暢，60幀是基本目標。而實現(xiàn)這一點的關鍵，就是requestAnimationFrame （簡稱rAF）。它不是簡單的定時器替代品，而是瀏覽器專門為動畫設計的一套機制，能自動配合頁面刷新節(jié)奏，達到更自然、更高效的動畫效果。

什麼是requestAnimationFrame ？

簡單來說， requestAnimationFrame是瀏覽器提供的一種API，用來告訴瀏覽器你希望執(zhí)行一個動畫，並請求瀏覽器在下一次重繪之前調(diào)用指定的回調(diào)函數(shù)。這樣做的好處是，瀏覽器可以優(yōu)化多個動畫的同步執(zhí)行，避免不必要的重繪和佈局抖動。

它不像setTimeout或setInterval那樣“死板”，而是根據(jù)當前頁面是否可見、設備性能等自動調(diào)整幀率，從而更省資源、更流暢。

舉個最簡單的例子：

 function animate() {
  // 更新動畫狀態(tài)，修改樣式或位置requestAnimationFrame(animate);
}
animate();

這段代碼會不斷調(diào)用自己，形成一個動畫循環(huán)。瀏覽器會盡可能以每秒60次的頻率執(zhí)行它（也就是16.7ms一幀）。

為什麼用requestAnimationFrame而不是setInterval ？

很多人一開始會用setInterval來做動畫，比如：

 setInterval(() => {
  // 動畫邏輯}, 1000 / 60);

但這種方法有幾個問題：

• 瀏覽器不一定能準時執(zhí)行，尤其是在頁面被切換到後臺時；
• 如果動畫邏輯執(zhí)行時間超過設定間隔，就會造成“跳幀”；
• 多個定時器之間沒有協(xié)調(diào)，容易卡頓。

而requestAnimationFrame的優(yōu)勢在於：

• 它會在下一次瀏覽器重繪前執(zhí)行，確保動畫和屏幕刷新同步；
• 頁面不可見時（比如切換標籤頁）會自動暫停，節(jié)省資源；
• 瀏覽器會自動管理多個rAF 請求，優(yōu)化渲染性能。

如何用它做出平滑的H5 動畫？

要讓H5 動畫真正“絲滑”，光調(diào)用requestAnimationFrame還不夠，還需要注意幾個關鍵點：

1.使用時間戳控制動畫進度

rAF 的回調(diào)函數(shù)會傳入一個時間戳參數(shù)，表示從頁面加載開始到當前幀的時間（單位是毫秒）。我們可以用這個時間戳來計算動畫的當前狀態(tài)，而不是依賴幀數(shù)或步進值。

 let startTime = null;

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;

  // 假設動畫持續(xù)時間為1000ms
  if (elapsed < 1000) {
    const progress = elapsed / 1000;
    // 根據(jù)progress 更新元素位置或樣式requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

這樣即使幀率波動，動畫也能保持勻速。

2.避免頻繁操作DOM

每次修改DOM 都可能觸發(fā)重排或重繪。如果你在動畫中頻繁修改多個樣式，建議：

• 使用CSS Transform 或Opacity，這些屬性對性能影響?。?/li>
• 批量更新樣式，避免多次訪問佈局屬性（如offsetWidth）；
• 使用will-change或translateZ啟用硬件加速（但別濫用）；

3.控制動畫複雜度

H5 頁面常運行在移動設備上，性能有限。如果你同時有多個複雜動畫，建議：

• 優(yōu)先級高的動畫使用rAF，其他用CSS 動畫；
• 不要過度嵌套動畫元素；
• 在低端設備上適當降級動畫效果；

常見問題和注意事項

• 不要在rAF 中做太多同步計算：如果一幀裡執(zhí)行太多邏輯，會導致掉幀。複雜計算可以拆分到多個幀中。
• 注意清除動畫循環(huán)：如果動畫結束或者組件卸載了，要停止調(diào)用rAF，否則可能造成內(nèi)存洩漏。
• 兼容性問題不大：現(xiàn)代瀏覽器都支持rAF，但如果要支持非常老的Android 瀏覽器，可以加個polyfill。

基本上就這些。用好requestAnimationFrame ，配合合理的動畫設計和性能控制，H5 的動畫也可以很流暢。它不復雜，但容易忽略細節(jié)，比如時間控制和DOM 操作方式。只要注意這些點，就能做出更自然、更高效的動畫體驗。

以上是H5 requestAnimationFrame用於平滑動畫的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！