js中requestAnimationFrame()解讀與使用示例

更新時間：2024年09月12日 09:33:18 作者：OEC小胖胖

requestAnimationFrame()是JavaScript中用于創(chuàng)建高效、流暢動畫的核心方法,它與瀏覽器的重繪過程同步,確保每次動畫更新都與顯示器刷新率同步,下面就來一起了解一下

requestAnimationFrame() 是 JavaScript 中用于實現(xiàn)動畫效果的一個重要方法。它告訴瀏覽器你想執(zhí)行動畫，并要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)來更新動畫。相比傳統(tǒng)的 setTimeout 和 setInterval，requestAnimationFrame() 更加高效且能夠提供更流暢的動畫。

基本概念

1. 瀏覽器的重繪和回流

瀏覽器通過一個叫做“幀”的機制來渲染頁面內(nèi)容。一般來說，瀏覽器每秒會嘗試繪制 60 幀（60FPS），每一幀都需要瀏覽器計算布局、樣式，并把內(nèi)容繪制到屏幕上。requestAnimationFrame() 是專門為此設計的，它會讓你的動畫代碼在瀏覽器的重繪過程中執(zhí)行，確保每次動畫更新都與瀏覽器的刷新頻率同步。

2. 效率和節(jié)能

requestAnimationFrame() 會根據(jù)顯示器的刷新率來自動調(diào)節(jié)幀率，常見的刷新率是 60FPS。如果你的顯示器是 60Hz，requestAnimationFrame() 每秒會回調(diào)約 60 次。如果瀏覽器窗口被最小化，或者切換到另一個標簽頁，requestAnimationFrame() 會暫停執(zhí)行，減少CPU和GPU的負載。這和 setTimeout、setInterval 不同，它們會一直執(zhí)行，即使頁面不可見。

使用方法

let start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  // 更新動畫的位置，這里是簡單的例子，假設移動一個物體
  const element = document.getElementById('box');
  element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;

  if (progress < 2000) { // 繼續(xù)動畫，直到經(jīng)過2秒
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

示例詳解

1. 回調(diào)函數(shù)

requestAnimationFrame() 需要一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)會在瀏覽器準備好繪制下一幀時被調(diào)用。在上面的示例中，step 函數(shù)就是這個回調(diào)函數(shù)。

2. timestamp 參數(shù)

瀏覽器會為回調(diào)函數(shù)傳遞一個 timestamp 參數(shù)，表示當前被請求的動畫幀開始時的時間戳。這個 timestamp 是以毫秒為單位的高精度時間，可以用來計算動畫進行的時間差。

3. 遞歸調(diào)用

在 step 函數(shù)內(nèi)部，我們通過 requestAnimationFrame() 自己調(diào)用自己，形成一個動畫的遞歸循環(huán)。每一次調(diào)用 requestAnimationFrame(step)，瀏覽器都會在下一幀時再次執(zhí)行 step 函數(shù)。

4. 條件控制

為了停止動畫，我們可以在遞歸調(diào)用時通過條件判斷，比如在上面的例子中，我們通過 progress < 2000 來控制動畫持續(xù) 2 秒。如果不加這個條件，動畫會一直進行下去。

與 setTimeout 和 setInterval 的比較

function moveBoxWithSetTimeout() {
  let position = 0;
  const element = document.getElementById('box');

  function update() {
    position += 5;
    element.style.transform = `translateX(${position}px)`;
    
    if (position < 200) {
      setTimeout(update, 1000 / 60); // 每秒60次更新
    }
  }

  update();
}

function moveBoxWithRequestAnimationFrame() {
  let position = 0;
  const element = document.getElementById('box');

  function update() {
    position += 5;
    element.style.transform = `translateX(${position}px)`;

    if (position < 200) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

區(qū)別：

時間控制：
- setTimeout(update, 1000 / 60) 人為指定每秒60幀，但實際性能可能受限于瀏覽器、CPU 等，不一定精準。
- requestAnimationFrame() 由瀏覽器根據(jù)系統(tǒng)的負載來決定最佳幀率，并與顯示器的刷新同步。
后臺標簽頁處理：
- setTimeout 和 setInterval 在后臺標簽頁或最小化時仍然運行，浪費資源。
- requestAnimationFrame() 會在頁面不可見時暫停，節(jié)省資源。
流暢度：
- setTimeout 和 setInterval 由于無法和瀏覽器的重繪同步，容易導致卡頓、抖動。
- requestAnimationFrame() 能提供更加平滑的動畫效果。

多個動畫場景

你可以通過 requestAnimationFrame() 同時控制多個動畫。只需要確保每個動畫邏輯在回調(diào)函數(shù)中被正確處理。

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  box1.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
  box2.style.transform = `translateY(${Math.min(progress / 20, 300)}px)`;

  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

上面的代碼演示了：

box1 向右移動，每 10 毫秒移動一個像素，直到移動 200 像素。
box2 向下移動，每 20 毫秒移動一個像素，直到移動 300 像素。

多個元素的動畫可以在同一個 requestAnimationFrame 回調(diào)中進行，這樣它們會同步進行，保證幀率的一致性。

動畫的取消

requestAnimationFrame() 返回一個唯一的整數(shù) ID，代表該動畫幀請求?？梢允褂?nbsp;cancelAnimationFrame() 取消這個動畫。

let animationId;

function step(timestamp) {
  // 動畫邏輯
  if (progress &lt; 2000) {
    animationId = requestAnimationFrame(step);
  }
}

// 開始動畫
animationId = requestAnimationFrame(step);

// 取消動畫
cancelAnimationFrame(animationId);