核心要點(diǎn)

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

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

window.requestAnimationFrame(callbackFunction);

與 setTimeout（在指定時(shí)間延遲后運(yùn)行）不同，requestAnimationFrame 在瀏覽器下次繪制屏幕時(shí)運(yùn)行回調(diào)函數(shù)。這使您可以與瀏覽器的繪制周期同步，這樣就不會(huì)繪制得太頻繁或不夠頻繁，這意味著您的動(dòng)畫將非常流暢，而且不會(huì)對(duì) CPU 造成過大的負(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)表示法訪問窗口對(duì)象上的屬性。我們使用方括號(hào)表示法是因?yàn)槲覀冋谑褂米址B接動(dòng)態(tài)構(gòu)建屬性名稱。如果瀏覽器不支持它，我們將回退到一個(gè)常規(guī)函數(shù)，該函數(shù)在 60 毫秒后調(diào)用 setTimeout 以實(shí)現(xiàn)類似的效果。

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

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

window.requestAnimationFrame(callbackFunction);

在每次調(diào)用步進(jìn)函數(shù)時(shí)，我們需要跟蹤動(dòng)畫的進(jìn)度以知道何時(shí)結(jié)束。我們將計(jì)算動(dòng)畫應(yīng)該結(jié)束的時(shí)間，并根據(jù)每個(gè)周期剩余的時(shí)間來計(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() 來獲取以毫秒為單位的當(dāng)前時(shí)間。加號(hào)將日期對(duì)象強(qiáng)制轉(zhuǎn)換為數(shù)值數(shù)據(jù)類型。rate 變量是一個(gè)介于 0 和 1 之間的數(shù)字，表示動(dòng)畫的進(jìn)度率。

動(dòng)畫函數(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)畫
      return;
    } else {
      var rate = 1 - remaining / duration;
      // 執(zhí)行一些動(dòng)畫操作
    }

    _requestAnimationFrame(step);
  }
  step();
}

在 run 函數(shù)中，我將放置一些代碼，這些代碼將節(jié)點(diǎn)的寬度從“100px”動(dòng)畫到“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)畫函數(shù)

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

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

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

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

請(qǐng)注意，盒子的寬度首先擴(kuò)展，占用 2 秒，然后高度擴(kuò)展，再占用 2 秒。

代碼優(yōu)化

讓我們稍微清理一下我們的代碼。請(qǐng)注意，我們多次調(diào)用 getElementById，這不太好。讓我們緩存它，并在緩存開始和結(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ì)象的一部分，并且可以通過 this 變量訪問對(duì)象的所有屬性。現(xiàn)在，無論何時(shí)運(yùn)行步進(jìn)函數(shù)，我們都緩存了所有變量。就是這樣。一個(gè)簡(jiǎn)單的動(dòng)畫輔助函數(shù)，它利用 requestAnimationFrame 并為舊版瀏覽器提供回退。

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

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

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