核心要點

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

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

window.requestAnimationFrame(callbackFunction);

與 setTimeout（在指定時間延遲後運行）不同，requestAnimationFrame 在瀏覽器下次繪製屏幕時運行回調(diào)函數(shù)。這使您可以與瀏覽器的繪製週期同步，這樣就不會繪製得太頻繁或不夠頻繁，這意味著您的動畫將非常流暢，而且不會對 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");

請注意，我們?nèi)绾问褂梅嚼ㄌ柋硎痉ㄔL問窗口對像上的屬性。我們使用方括號表示法是因為我們正在使用字符串連接動態(tài)構(gòu)建屬性名稱。如果瀏覽器不支持它，我們將回退到一個常規(guī)函數(shù)，該函數(shù)在 60 毫秒後調(diào)用 setTimeout 以實現(xiàn)類似的效果。

動畫函數(shù)構(gòu)建

現(xiàn)在讓我們構(gòu)建一個簡單的函數(shù)，該函數(shù)將重複調(diào)用我們的 _requestAnimationFrame 來模擬動畫。為了實現(xiàn)動畫，我們需要一個作為入口點的外部函數(shù)和一個將被重複調(diào)用的內(nèi)部函數(shù)（稱為步進函數(shù)）。

window.requestAnimationFrame(callbackFunction);

在每次調(diào)用步進函數(shù)時，我們需要跟蹤動畫的進度以知道何時結(jié)束。我們將計算動畫應(yīng)該結(jié)束的時間，並根據(jù)每個週期剩餘的時間來計算進度。

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() 來獲取以毫秒為單位的當前時間。加號將日期對象強制轉(zhuǎn)換為數(shù)值數(shù)據(jù)類型。 rate 變量是一個介於 0 和 1 之間的數(shù)字，表示動畫的進度率。

動畫函數(shù)完善

現(xiàn)在我們需要考慮函數(shù)的輸入和輸出。讓我們允許函數(shù)接受函數(shù)和持續(xù)時間作為參數(shù)。

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

我們可以像這樣調(diào)用此函數(shù)：

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 毫秒，則在此結(jié)束動畫
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 執(zhí)行一些動畫操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

在 run 函數(shù)中，我將放置一些代碼，這些代碼將節(jié)點的寬度從“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();
}

改進動畫函數(shù)

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

animate({
  time: 3,  // 以秒為單位的時間
  run: function(rate) { /* 使用 rate 執(zhí)行某些操作 */ }
});

當?shù)谝淮芜\行動畫時，item 為 null，remaining 小於 60 毫秒，因此我們從數(shù)組中彈出第一個項目並開始執(zhí)行它。在動畫的最後一幀中，remaining 也小於 60，因此我們完成當前動畫，從數(shù)組中彈出下一個項目並開始動畫下一個項目。還要注意，我已經(jīng)將 rate 值通過緩動公式?，F(xiàn)在從 0 到 1 的值以三次方的比例增長，使其看起來不那麼僵硬。要調(diào)用動畫函數(shù)，我們執(zhí)行以下操作：

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

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

代碼優(yōu)化

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

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();
}

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

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

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

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