JavaScript requestAnimationFrame

2018-07-24 11:54 更新

目錄

概述

requestAnimationFrame是瀏覽器用于定時(shí)循環(huán)操作的一個(gè)接口,類似于setTimeout,主要用途是按幀對(duì)網(wǎng)頁(yè)進(jìn)行重繪。

設(shè)置這個(gè)API的目的是為了讓各種網(wǎng)頁(yè)動(dòng)畫效果(DOM動(dòng)畫、Canvas動(dòng)畫、SVG動(dòng)畫、WebGL動(dòng)畫)能夠有一個(gè)統(tǒng)一的刷新機(jī)制,從而節(jié)省系統(tǒng)資源,提高系統(tǒng)性能,改善視覺效果。代碼中使用這個(gè)API,就是告訴瀏覽器希望執(zhí)行一個(gè)動(dòng)畫,讓瀏覽器在下一個(gè)動(dòng)畫幀安排一次網(wǎng)頁(yè)重繪。

requestAnimationFrame的優(yōu)勢(shì),在于充分利用顯示器的刷新機(jī)制,比較節(jié)省系統(tǒng)資源。顯示器有固定的刷新頻率(60Hz或75Hz),也就是說(shuō),每秒最多只能重繪60次或75次,requestAnimationFrame的基本思想就是與這個(gè)刷新頻率保持同步,利用這個(gè)刷新頻率進(jìn)行頁(yè)面重繪。此外,使用這個(gè)API,一旦頁(yè)面不處于瀏覽器的當(dāng)前標(biāo)簽,就會(huì)自動(dòng)停止刷新。這就節(jié)省了CPU、GPU和電力。

不過(guò)有一點(diǎn)需要注意,requestAnimationFrame是在主線程上完成。這意味著,如果主線程非常繁忙,requestAnimationFrame的動(dòng)畫效果會(huì)大打折扣。

requestAnimationFrame使用一個(gè)回調(diào)函數(shù)作為參數(shù)。這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。

requestID = window.requestAnimationFrame(callback); 

目前,主要瀏覽器Firefox 23 / IE 10 / Chrome / Safari)都支持這個(gè)方法。可以用下面的方法,檢查瀏覽器是否支持這個(gè)API。如果不支持,則自行模擬部署該方法。

 window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

上面的代碼按照1秒鐘60次(大約每16.7毫秒一次),來(lái)模擬requestAnimationFrame。

使用requestAnimationFrame的時(shí)候,只需反復(fù)調(diào)用它即可。

function repeatOften() {
  // Do whatever
  requestAnimationFrame(repeatOften);
}

requestAnimationFrame(repeatOften);

cancelAnimationFrame方法

cancelAnimationFrame方法用于取消重繪。

window.cancelAnimationFrame(requestID);

它的參數(shù)是requestAnimationFrame返回的一個(gè)代表任務(wù)ID的整數(shù)值。

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});

上面代碼持續(xù)在body元素下添加div元素,直到用戶點(diǎn)擊stop按鈕為止。

實(shí)例

下面,舉一個(gè)實(shí)例。

假定網(wǎng)頁(yè)中有一個(gè)動(dòng)畫區(qū)塊。

<div id="anim">點(diǎn)擊運(yùn)行動(dòng)畫</div> 

然后,定義動(dòng)畫效果。

var elem = document.getElementById("anim");

var startTime = undefined;
 
function render(time) {
 
  if (time === undefined)
    time = Date.now();
  if (startTime === undefined)
    startTime = time;
 
  elem.style.left = ((time - startTime)/10 % 500) + "px";
}

最后,定義click事件。

elem.onclick = function() {

    (function animloop(){
      render();
      requestAnimFrame(animloop);
    })();

};

運(yùn)行效果可查看jsfiddle。

參考鏈接

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)