核心要點(diǎn)

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

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

window.requestAnimationFrame(callbackFunction);

與 setTimeout（在指定時(shí)間延遲後運(yùn)行）不同，requestAnimationFrame 在瀏覽器下次繪製屏幕時(shí)運(yùn)行回調(diào)函數(shù)。這使您可以與瀏覽器的繪製週期同步，這樣就不會(huì)繪製得太頻繁或不夠頻繁，這意味著您的動(dòng)畫(huà)將非常流暢，而且不會(huì)對(duì) CPU 造成過(guò)大的負(fù)擔(dān)。

瀏覽器兼容性處理

目前每個(gè)瀏覽器都有 requestAnimationFrame 的前綴版本，因此讓我們檢測(cè)支持哪個(gè)版本並對(duì)其進(jìn)行引用：

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");

請(qǐng)注意，我們?nèi)绾问褂梅嚼ㄌ?hào)表示法訪問(wèn)窗口對(duì)像上的屬性。我們使用方括號(hào)表示法是因?yàn)槲覀冋谑褂米址B接動(dòng)態(tài)構(gòu)建屬性名稱。如果瀏覽器不支持它，我們將回退到一個(gè)常規(guī)函數(shù)，該函數(shù)在 60 毫秒後調(diào)用 setTimeout 以實(shí)現(xiàn)類(lèi)似的效果。

動(dòng)畫(huà)函數(shù)構(gòu)建

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

window.requestAnimationFrame(callbackFunction);

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

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");

請(qǐng)注意，我們正在使用 new Date() 來(lái)獲取以毫秒為單位的當(dāng)前時(shí)間。加號(hào)將日期對(duì)象強(qiáng)制轉(zhuǎn)換為數(shù)值數(shù)據(jù)類(lèi)型。 rate 變量是一個(gè)介於 0 和 1 之間的數(shù)字，表示動(dòng)畫(huà)的進(jìn)度率。

動(dòng)畫(huà)函數(shù)完善

現(xiàn)在我們需要考慮函數(shù)的輸入和輸出。讓我們?cè)试S函數(shù)接受函數(shù)和持續(xù)時(shí)間作為參數(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) {       // 如果剩余時(shí)間少于 60 毫秒，則在此結(jié)束動(dòng)畫(huà)
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 執(zhí)行一些動(dòng)畫(huà)操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

在 run 函數(shù)中，我將放置一些代碼，這些代碼將節(jié)點(diǎn)的寬度從“100px”動(dòng)畫(huà)到“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 = 進(jìn)度為 100%
      return;
    } else {
      var rate = 1 - remaining / duration;
      item.run(rate);
    }

    _requestAnimationFrame(step);
  }
  step();
}

改進(jìn)動(dòng)畫(huà)函數(shù)

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

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

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

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

請(qǐng)注意，盒子的寬度首先擴(kuò)展，佔(zhàn)用 2 秒，然後高度擴(kuò)展，再佔(zhàn)用 2 秒。

代碼優(yōu)化

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

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 = 進(jìn)度為 100%

      item = list.shift();  // 獲取下一個(gè)項(xiàng)目

      if (item) {
        duration = item.time * 1000;
        end = current + duration;
        item.run(0);  // 0 = 進(jìn)度為 0%
      } else {
        return;
      }
    } else {
      var rate = remaining / duration;
      rate = 1 - Math.pow(rate, 3);  // 緩動(dòng)公式
      item.run(rate);
    }

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

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

(腳本演示部分省略，因?yàn)闊o(wú)法在此環(huán)境中運(yùn)行JavaScript代碼。)

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

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