前端開(kāi)發(fā)whqet,csdn,王海慶,whqet,前端開(kāi)發(fā)專家

還在使用setInterval嗎，你out了，requestAnimationFrame可以實(shí)現(xiàn)更為經(jīng)濟(jì)、更加準(zhǔn)確的控制動(dòng)畫(huà)，今天來(lái)看看它的來(lái)龍去脈。

以往

在web動(dòng)畫(huà)、app動(dòng)畫(huà)中，我們經(jīng)常通過(guò)setInterval或setTimeout定時(shí)修改DOM、CSS實(shí)現(xiàn)動(dòng)畫(huà)，如下面代碼所示。

var timer=setInterval(function(){//一些動(dòng)畫(huà) },1000/60) //清除動(dòng)畫(huà) clearInterval(timer);

不過(guò)如此動(dòng)畫(huà)的方式極為耗費(fèi)資源，經(jīng)常是這樣的結(jié)果，剛開(kāi)始比較流暢，5分鐘之后動(dòng)畫(huà)就卡住了，于是“大家”都看不下去了，開(kāi)始想各種辦法。

簡(jiǎn)介

2011年左右，Paul Irish的《requestAnimationFrame for Smart Animating》首先介紹了requestAnimationFrame的使用，然后經(jīng)過(guò)大家的努力《Timing control for script-based animations》在2013年成為了w3c的候選標(biāo)準(zhǔn)。

requestAnimationFrame的方式的優(yōu)勢(shì)如下：

1.經(jīng)過(guò)瀏覽器優(yōu)化，動(dòng)畫(huà)更流暢

2.窗口沒(méi)激活時(shí)，動(dòng)畫(huà)將停止，省計(jì)算資源

3.更省電，尤其是對(duì)移動(dòng)終端

requestAnimationFrame的使用方式，簡(jiǎn)單調(diào)用代碼如下。

function animate() {// Do whateverrequestAnimationFrame(animate);// Do something animate} //go-> requestAnimationFrame(animate);

有的時(shí)候我們必須要加一些控制，requestAnimationFrame也可以像setInterval一樣返回一個(gè)句柄，然后我們可以取消它。控制動(dòng)畫(huà)代碼如下。

var globalID; function animate() {// Do whateverglobalID=requestAnimationFrame(animate);// Do something animate} //when ot startglobalID=requestAnimationFrame(animate); //when to stopcancelAnimationFrame(globalID);

好了，介紹完了吧。

呃，先別走，對(duì)于一個(gè)前端開(kāi)發(fā)者，我們不能如此“單純”，因?yàn)闉g覽器太任性，誰(shuí)知道這些瀏覽器都是怎么“想的”，我們要看看瀏覽器兼容情況。

來(lái)，上CanIUse。

桌面端除了萬(wàn)惡的IE系列低版本9-，移動(dòng)端除了Opera Mini和Android Browser4.3-其他都支持。總支持率83.38%，不加前綴支持率81.98%，支持率不錯(cuò)。作為一個(gè)富有極客精神的前端er，我們還得繼續(xù)，拯救那些“手里沒(méi)錢、手里有權(quán)卻榆木疙瘩，還在使用低版本瀏覽器”的同胞，來(lái)個(gè)polyfill。

補(bǔ)丁

Paul Irish的簡(jiǎn)化版的補(bǔ)丁，補(bǔ)丁和使用如下代碼所示。

// 補(bǔ)丁 window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){window.setTimeout(callback, 1000 / 60);}; })();// 使用(function animate(){requestAnimationFrame(animate);//動(dòng)畫(huà) })();

這個(gè)補(bǔ)丁可以較好的兼容支持該特性的瀏覽器，但是對(duì)于不支持的呢？這里講了怎么添加，如何停止呢？于是我們的補(bǔ)丁還得繼續(xù)……

(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.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) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());

有后來(lái)，又有了新更新，大家到github查看詳情，代碼貼過(guò)來(lái)，大家研究。

// requestAnimationFrame polyfill by Erik M?ller. // Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavi?, Darius Bacon// MIT licenseif (!Date.now)Date.now = function() { return new Date().getTime(); };(function() {'use strict';var vendors = ['webkit', 'moz'];for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {var vp = vendors[i];window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']|| window[vp+'CancelRequestAnimationFrame']);}if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {var lastTime = 0;window.requestAnimationFrame = function(callback) {var now = Date.now();var nextTime = Math.max(lastTime + 16, now);return setTimeout(function() { callback(lastTime = nextTime); },nextTime - now);};window.cancelAnimationFrame = clearTimeout;} }());

當(dāng)然，實(shí)戰(zhàn)的時(shí)候我們把這些代碼單獨(dú)放到一個(gè)文件中，到這里下載。

案例

最后，我們來(lái)個(gè)粒子案例，體會(huì)體會(huì)requestAnimatonFrame的使用。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------ == 粒子案例==全屏預(yù)覽==在線編輯==下載收藏== ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

參考文獻(xiàn)和深入閱讀

1.?Paul Irish,?requestAnimationFrame for Smart Animating

2. MDN,?Window.requestAnimationFrame()

3.?Chris Coyier,?Using requestAnimationFrame

4.?Matt West, Efficient Animations with requestAnimationFrame

5. W3C CR,?Timing control for script-based animations

6.?Polyfill for requestAnimationFrame/cancelAnimationFrame

7. 張?chǎng)涡??CSS3動(dòng)畫(huà)那么強(qiáng)，requestAnimationFrame還有毛線用？

8.?朱永盛,?理解WebKit和Chromium: 渲染主循環(huán)（main loop)和requestAnimationFrame

感謝您耐心讀完，如果對(duì)您有幫助，請(qǐng)支持我

----------------------------------------------------------

前端開(kāi)發(fā)whqet，關(guān)注web前端開(kāi)發(fā)，分享相關(guān)資源，歡迎點(diǎn)贊，歡迎拍磚。

---------------------------------------------------------------------------------------------------------

總結(jié)

以上是生活随笔為你收集整理的requestAnimationFrame动画控制详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。