第JS使用window.requestAnimationFrame()實(shí)現(xiàn)逐幀動(dòng)畫(huà)window.requestAnimationFrame()方法告訴瀏覽器您希望執(zhí)行動(dòng)畫(huà)，并請(qǐng)求瀏覽器調(diào)用指定的函數(shù)在下一次重繪之前更新動(dòng)畫(huà)。該方法使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。

如果你想做逐幀動(dòng)畫(huà)的時(shí)候，你應(yīng)該用這個(gè)方法。這就要求你的動(dòng)畫(huà)函數(shù)執(zhí)行會(huì)先于瀏覽器重繪動(dòng)作。通常來(lái)說(shuō)，被調(diào)用的頻率是每秒60次，但是一般會(huì)遵循W3C標(biāo)準(zhǔn)規(guī)定的頻率。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。

基本語(yǔ)法:

requestID=window.requestAnimationFrame(callback);//Firefox23/IE10/Chrome/Safari7(incl.iOS)

requestID=window.mozRequestAnimationFrame(callback);//Firefox23

requestID=window.webkitRequestAnimationFrame(callback);//OlderversionsChrome/Webkit

瀏覽器支持情況:

下面通過(guò)兩個(gè)簡(jiǎn)單的Demo介紹下window.requestAnimationFrame()方法的使用

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title返回頂部/title

style

.box{

margin:0auto;

width:100%;

height:5000px;

.box1{

background:#b94a48;

.box2{

background:#fb8c00;

.box3{

background:#669900;

.box4{

background:#c0a16b;

.top{

position:fixed;

right:20px;

bottom:20px;

width:40px;

height:40px;

background:#8dc7ff;

border-radius:50%;

cursor:pointer;

/style

script

window.requestAnimationFrame=(function(){

returnwindow.requestAnimationFrame||

window.webkitRequestAnimationFrame||

window.mozRequestAnimationFrame||

function(callback){

window.setTimeout(callback,6000/60)

})()

window.cancelAnimFrame=(function(){

returnwindow.cancelAnimationFrame||

window.webkitCancelAnimationFrame||

window.mozCancelAnimationFrame||

window.oCancelAnimationFrame||

window.msCancelAnimationFrame||

function(callback){

window.clearTimeout(callback)

})()

functionscrollToTop(){

lettop=window.pageYOffset

constduration=320

conststep=top/(duration/(1000/60))0

constfn=()={

if(top=0){

top-=step

window.scrollTo(0,top)

fn.rafTimer=window.requestAnimationFrame(fn)

}else{

window.scrollTo(0,0)

window.cancelAnimationFrame(fn.rafTimer)

fn.rafTimer=window.requestAnimationFrame(fn)

/script

/head

body

div/div

div/div

div/div

div/div

div/div

/body

/html

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title錨點(diǎn)定位/title

style

.top{

margin:100pxauto;

cursor:pointer;

.top1{

color:#b94a48;

.top2{

color:#fb8c00;

.top3{

color:#669900;

.top4{

color:#c0a16b;

.box{

margin:0auto;

width:100%;

height:5000px;

.box1{

background:#b94a48;

.box2{

background:#fb8c00;

.box3{

background:#669900;

.box4{

background:#c0a16b;

/style

script

window.requestAnimationFrame=(function(){

returnwindow.requestAnimationFrame||

window.webkitRequestAnimationFrame||

window.mozRequestAnimationFrame||

function(callback){

window.setTimeout(callback,6000/60)

})()

window.cancelAnimFrame=(function(){

returnwindow.cancelAnimationFrame||

window.webkitCancelAnimationFrame||

window.mozCancelAnimationFrame||

window.oCancelAnimationFrame||

window.msCancelAnimationFrame||

function(callback){

window.clearTimeout(callback)

})()

functiongoPosition(index){

lettop=0

letdistance=document.getElementById(index).offsetTop

constduration=320

conststep=distance/(duration/(1000/60))0

constfn=()={

if(distance=top){

top+=step

window.scrollTo(0,top)

fn.rafTimer=window.requestAnimationFrame(fn)

}else{

window.cancelAnimationFrame(fn.rafTimer)

fn.rafTimer=window.requestAnimationFrame(fn)

/script

/head

body

div跳到第一個(gè)/div

div跳到第二個(gè)/div

div跳到第三個(gè)/div

div跳到第四個(gè)/div

divid="box1"/div

divid="box2"/div

divid="box3"/div

divid="box4"/div

/body

/html

網(wǎng)上技術(shù)大牛針對(duì)瀏覽器兼容封裝源碼:

///2011/requestanimationframe-for-smart-animating/

///emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

//requestAnimationFramepolyfillbyErikM?ller.fixesfromPaulIrishandTinoZijdel

//MITlicense

(function(){

varlastTime=0;

varvendors=['ms','moz','webkit','o'];

for(varx=0;xvendors.length!window.requestAnimationFrame;++x){

window.requestAnimationFrame=window[vendors[x]+'RequestAnimationFrame'];

window.cancelAnimationFrame=window[vendors[x]+'CancelAnimationFrame']

||window[vendors[x]+'CancelRequestAnimationFrame'];

if(!window.requestAnimationFrame)

window.requestAnimationFrame=function(callback,element){

varcurrTime=newDate().getTime();

vartimeToCall=Math.max(0,16-(currTime-lastTime));

varid=window.setTimeout(function(){callback(currTime+timeToCall);},

timeToCall