使用requestAnimationFrame的簡單動畫

核心要點

• requestAnimationFrame 是一個輔助函數，用於編寫與瀏覽器繪製週期同步的動畫，從而實現更流暢、更省CPU的動畫效果。它受所有現代瀏覽器支持，並且可以與舊版瀏覽器兼容。
• 使用 requestAnimationFrame 創建的 animate 函數可以設計為接受一系列函數作為參數，這些函數依次調用，從而實現動畫序列。該函數可以跟踪動畫進度併計算動畫結束時間。
• requestAnimationFrame 比 setTimeout 或 setInterval 更高效地創建動畫，因為它與瀏覽器的刷新率同步工作。它可以與任何 JavaScript 框架或庫一起使用，並可以處理各種動畫，包括 CSS 屬性、canvas 動畫、SVG 動畫以及基於滾動或用戶交互的動畫。

DOM 元素動畫涉及每隔幾毫秒修改一次 CSS 樣式以產生運動的錯覺。這意味著將回調函數傳遞給 setTimeout，並在該回調函數中修改節點的樣式對象。然後再次調用 setTimeout 來排隊下一個動畫幀。 requestAnimationFrame 這個新的輔助函數應運而生，用於編寫動畫。它最初出現在 Firefox 4 中，並逐漸被所有瀏覽器（包括 IE 10）採用。幸運的是，使其與舊版瀏覽器兼容很容易。

window.requestAnimationFrame(callbackFunction);

與 setTimeout（在指定時間延遲後運行）不同，requestAnimationFrame 在瀏覽器下次繪製屏幕時運行回調函數。這使您可以與瀏覽器的繪製週期同步，這樣就不會繪製得太頻繁或不夠頻繁，這意味著您的動畫將非常流暢，而且不會對 CPU 造成過大的負擔。

瀏覽器兼容性處理

目前每個瀏覽器都有 requestAnimationFrame 的前綴版本，因此讓我們檢測支持哪個版本並對其進行引用：

var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");

請注意，我們如何使用方括號表示法訪問窗口對像上的屬性。我們使用方括號表示法是因為我們正在使用字符串連接動態構建屬性名稱。如果瀏覽器不支持它，我們將回退到一個常規函數，該函數在 60 毫秒後調用 setTimeout 以實現類似的效果。

動畫函數構建

現在讓我們構建一個簡單的函數，該函數將重複調用我們的 _requestAnimationFrame 來模擬動畫。為了實現動畫，我們需要一個作為入口點的外部函數和一個將被重複調用的內部函數（稱為步進函數）。

window.requestAnimationFrame(callbackFunction);

在每次調用步進函數時，我們需要跟踪動畫的進度以知道何時結束。我們將計算動畫應該結束的時間，並根據每個週期剩餘的時間來計算進度。

var _requestAnimationFrame = function(win, t) {
  return win["webkitR" + t] || win["r" + t] || win["mozR" + t]
          || win["msR" + t] || function(fn) { setTimeout(fn, 60) }
}(window, "equestAnimationFrame");

請注意，我們正在使用 new Date() 來獲取以毫秒為單位的當前時間。加號將日期對象強制轉換為數值數據類型。 rate 變量是一個介於 0 和 1 之間的數字，表示動畫的進度率。

動畫函數完善

現在我們需要考慮函數的輸入和輸出。讓我們允許函數接受函數和持續時間作為參數。

function animate() {
  var step = function() {
    _requestAnimationFrame(step);
  }
  step();
}

我們可以像這樣調用此函數：

function animate() {
  var duration = 1000 * 3,  // 3 秒
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {       // 如果剩余时间少于 60 毫秒，则在此结束动画
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 执行一些动画操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

在 run 函數中，我將放置一些代碼，這些代碼將節點的寬度從“100px”動畫到“300px”。

function animate(item) {
  var duration = 1000 * item.time,
      end = +new Date() + duration;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      item.run(1);  // 1 = 进度为 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}

改進動畫函數

它工作正常，但我真正想要的是能夠輸入一個函數數組，這些函數依次調用。這樣，在第一個動畫結束後，第二個動畫就會開始。我們將把數組視為一個堆棧，一次彈出一個個項目。讓我們更改輸入：

animate({
  time: 3,  // 以秒为单位的时间
  run: function(rate) { /* 使用 rate 执行某些操作 */ }
});

當第一次運行動畫時，item 為 null，remaining 小於 60 毫秒，因此我們從數組中彈出第一個項目並開始執行它。在動畫的最後一幀中，remaining 也小於 60，因此我們完成當前動畫，從數組中彈出下一個項目並開始動畫下一個項目。還要注意，我已經將 rate 值通過緩動公式。現在從 0 到 1 的值以三次方的比例增長，使其看起來不那麼僵硬。要調用動畫函數，我們執行以下操作：

animate({
  time: 3,
  run: function(rate) {
    document.getElementById("box").style
      .width = (rate * (300 - 100) + 100) + "px";
  }
});

請注意，盒子的寬度首先擴展，佔用 2 秒，然後高度擴展，再佔用 2 秒。

代碼優化

讓我們稍微清理一下我們的代碼。請注意，我們多次調用 getElementById，這不太好。讓我們緩存它，並在緩存開始和結束值的同時緩存它。

function animate(list) {
  var item,
      duration,
      end = 0;

  var step = function() {
    var current = +new Date(),
        remaining = end - current;

    if (remaining < 60) {
      if (item) item.run(1);  // 1 = 进度为 100%

      item = list.shift();  // 获取下一个项目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 进度为 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 缓动公式
      item.run(rate);
    }

    _requestAnimationFrame(step);
  };
  step();
}

請注意，我們不需要修改主函數，因為 run 函數一直是自包含對象的一部分，並且可以通過 this 變量訪問對象的所有屬性。現在，無論何時運行步進函數，我們都緩存了所有變量。就是這樣。一個簡單的動畫輔助函數，它利用 requestAnimationFrame 並為舊版瀏覽器提供回退。

(腳本演示部分省略，因為無法在此環境中運行JavaScript代碼。)

(關於使用requestAnimationFrame進行簡單動畫的常見問題解答部分也省略，因為內容與原文高度重複，只需保留核心要點即可完成偽原創。)

以上是使用requestAnimationFrame的簡單動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！