window方法:requestAnimationFrame()

2021-08-23 09:59 更新

requestAnimationFrame()方法

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

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

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

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

requestAnimationFrame()方法語法

window.requestAnimationFrame(callback);

參數(shù)

callback
一個參數(shù),指定在更新動畫以進行下一次重繪時要調(diào)用的函數(shù)?;卣{(diào)有一個參數(shù)DOMHighResTimeStamp,它指示了requestAnimationFrame()開始觸發(fā)回調(diào)時的當前時間(從performance.now()返回的時間)。

返回值

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

示例

<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í)行動畫</button>

  <button id='c'>執(zhí)行動畫</button>

  <script>

    //用來兼容不同瀏覽器

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

    };

    //在點了多次c之后,動畫速度比較快的情況下點b,則動畫效果一點點減慢直到停止

    b.onclick = function () {

      window.cancelAnimationFrame(ret);

    };

    //如果一直點c,動畫會越來越快

    c.onclick = function () {

      loopAnim();

    };

    (loopAnim())();

  </script>

</body>

</html>

規(guī)范

規(guī)范 狀態(tài) 注釋
HTML Living Standard 
該規(guī)范中“requestAnimationFrame”的定義。
Living Standard
沒有變化,取代前一個。
基于腳本的動畫的時序控制 
該規(guī)范中“requestAnimationFrame”的定義。
Obsolete
初步定義

瀏覽器兼容性

電腦端 移動端
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)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號