前端開發whqet,csdn,王海慶,whqet,前端開發專家

還在使用setInterval嗎，你out了，requestAnimationFrame可以實現更為經濟、更加準確的控制動畫，今天來看看它的來龍去脈。

以往

在web動畫、app動畫中，我們經常通過setInterval或setTimeout定時修改DOM、CSS實現動畫，如下面代碼所示。

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

不過如此動畫的方式極為耗費資源，經常是這樣的結果，剛開始比較流暢，5分鐘之后動畫就卡住了，于是“大家”都看不下去了，開始想各種辦法。

簡介

2011年左右，Paul Irish的《requestAnimationFrame for Smart Animating》首先介紹了requestAnimationFrame的使用，然后經過大家的努力《Timing control for script-based animations》在2013年成為了w3c的候選標準。

requestAnimationFrame的方式的優勢如下：

1.經過瀏覽器優化，動畫更流暢

2.窗口沒激活時，動畫將停止，省計算資源

3.更省電，尤其是對移動終端

requestAnimationFrame的使用方式，簡單調用代碼如下。

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

有的時候我們必須要加一些控制，requestAnimationFrame也可以像setInterval一樣返回一個句柄，然后我們可以取消它。控制動畫代碼如下。

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

好了，介紹完了吧。

呃，先別走，對于一個前端開發者，我們不能如此“單純”，因為瀏覽器太任性，誰知道這些瀏覽器都是怎么“想的”，我們要看看瀏覽器兼容情況。

來，上CanIUse。

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

補丁

Paul Irish的簡化版的補丁，補丁和使用如下代碼所示。

// 補丁 window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){window.setTimeout(callback, 1000 / 60);}; })();// 使用(function animate(){requestAnimationFrame(animate);//動畫 })();

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

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

有后來，又有了新更新，大家到github查看詳情，代碼貼過來，大家研究。

// 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;} }());

當然，實戰的時候我們把這些代碼單獨放到一個文件中，到這里下載。

案例

最后，我們來個粒子案例，體會體會requestAnimatonFrame的使用。

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

參考文獻和深入閱讀

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. 張鑫旭,?CSS3動畫那么強，requestAnimationFrame還有毛線用？

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

感謝您耐心讀完，如果對您有幫助，請支持我

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

前端開發whqet，關注web前端開發，分享相關資源，歡迎點贊，歡迎拍磚。

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

總結

以上是生活随笔為你收集整理的requestAnimationFrame动画控制详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。