閱讀(9.7k) 書(shū)簽贊(0) 我要糾錯(cuò)

window方法：requestAnimationFrame()

2021-08-23 09:59 更新

requestAnimationFrame()方法

該window.requestAnimationFrame()方法告訴瀏覽器您希望執(zhí)行動(dòng)畫(huà)，并請(qǐng)求瀏覽器調(diào)用指定的函數(shù)以在下次重繪之前更新動(dòng)畫(huà)。該方法將回調(diào)作為在重繪之前調(diào)用的參數(shù)。

注意：如果要在下次重繪時(shí)為另一幀設(shè)置動(dòng)畫(huà)，則回調(diào)例程必須自己調(diào)用requestAnimationFrame()。

只要您準(zhǔn)備好在屏幕上更新動(dòng)畫(huà)，就應(yīng)該調(diào)用此方法。這將請(qǐng)求在瀏覽器執(zhí)行下一次重繪之前調(diào)用您的動(dòng)畫(huà)函數(shù)。回調(diào)次數(shù)通常為每秒60次，但根據(jù)W3C建議，通常會(huì)與大多數(shù)Web瀏覽器中的顯示刷新率相匹配。當(dāng)在后臺(tái)選項(xiàng)卡或隱藏的<iframe>中運(yùn)行時(shí)，大多數(shù)瀏覽器都會(huì)暫停調(diào)用requestAnimationFrame()，以提高性能和延長(zhǎng)電池壽命。

回調(diào)方法傳遞一個(gè)參數(shù)，一個(gè)DOMHighResTimeStamp，它指示由requestAnimationFrame()start開(kāi)始排隊(duì)的回調(diào)的當(dāng)前時(shí)間。該參數(shù)指示requestAnimationFrame()排隊(duì)的回調(diào)開(kāi)始觸發(fā)時(shí)的當(dāng)前時(shí)間。因此，在一個(gè)框架中有多個(gè)回調(diào)，每個(gè)回調(diào)都接收相同的時(shí)間戳，即使在計(jì)算每個(gè)先前的回調(diào)的工作負(fù)載期間已經(jīng)過(guò)了時(shí)間。此時(shí)間戳是十進(jìn)制數(shù)，以毫秒為單位，但最小精度為1ms（1000μs）。

requestAnimationFrame()方法語(yǔ)法

window.requestAnimationFrame(callback);

參數(shù)

callback: 一個(gè)參數(shù)，指定在更新動(dòng)畫(huà)以進(jìn)行下一次重繪時(shí)要調(diào)用的函數(shù)?；卣{(diào)有一個(gè)參數(shù)DOMHighResTimeStamp，它指示了requestAnimationFrame()開(kāi)始觸發(fā)回調(diào)時(shí)的當(dāng)前時(shí)間(從performance.now()返回的時(shí)間)。

返回值

返回一個(gè)long整數(shù)值，即請(qǐng)求ID，用于唯一標(biāo)識(shí)回調(diào)列表中的條目。這是一個(gè)非零值，但您可能不會(huì)對(duì)其值做任何其他假設(shè)。您可以向window.cancelAnimationFrame()傳遞此值以取消刷新回調(diào)請(qǐng)求。

示例

<html>
<head>
  <title>w3cschool(w3cschool.cn)</title>
</head>
<body>
  <div id='e' style='border:1px solid;width:100px;height:100px;position:relative;'></div>
  <button id='b'>取消執(zhí)行動(dòng)畫(huà)</button>
  <button id='c'>執(zhí)行動(dòng)畫(huà)</button>
  <script>
    //用來(lái)兼容不同瀏覽器
    window.requestAnimat = (function () {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame || function (callback) {
          setTimeout(callback, 1000 / 60);
        }
    })();
    let e = document.getElementById('e'), b = document.getElementById('b'), c = document.getElementById('c');
    //便宜量
    let left = 0;
    //正反向
    let flag = true;
    let ret = 0;
    //渲染方法
    function render() {
      if (flag) {
        e.style.left = `${left++}`;
        if (left == 100) flag = false;
      } else {
        e.style.left = `${left--}`;
        if (left == 0) flag = true;
      }
    }
    function loopAnim() {
      render();
      ret = requestAnimat(loopAnim);
    };
    //在點(diǎn)了多次c之后，動(dòng)畫(huà)速度比較快的情況下點(diǎn)b，則動(dòng)畫(huà)效果一點(diǎn)點(diǎn)減慢直到停止
    b.onclick = function () {
      window.cancelAnimationFrame(ret);
    };
    //如果一直點(diǎn)c，動(dòng)畫(huà)會(huì)越來(lái)越快
    c.onclick = function () {
      loopAnim();
    };
    (loopAnim())();
  </script>
</body>
</html>

規(guī)范

規(guī)范	狀態(tài)	注釋
HTML Living Standard 該規(guī)范中“requestAnimationFrame”的定義。	Living Standard	沒(méi)有變化，取代前一個(gè)。
基于腳本的動(dòng)畫(huà)的時(shí)序控制該規(guī)范中“requestAnimationFrame”的定義。	Obsolete	初步定義

瀏覽器兼容性

	電腦端						移動(dòng)端
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari
基本支持	支持：24	支持	支持：23	支持：10	支持：15	支持：6.1	支持	支持：25	支持	支持：23	支持：15	支持：7.1
返回值	支持：23	支持	支持：11	支持：10	支持：15	支持：6.1	支持	支持：25	支持	支持：14	支持：15	支持：6.1

以上內(nèi)容是否對(duì)您有幫助：

← window方法：releaseEvents()

window方法：requestFileSystem() →

寫(xiě)筆記

我要補(bǔ)充