---

簡介

當(dāng)用JS做動畫效果時，一般用setTimeout()或setInterval()來進行動畫效果的制作，現(xiàn)在好了，出現(xiàn)了一個專門用于處理動畫的API——requestAnimationFrame()，表意為“請求動畫幀”。

---

用法

基本語法：

requestAnimationFrame(callback)//callback為回調(diào)函數(shù) cancelAnimationFrame(id) //requestAnimationFrame的返回值

requestAnimationFrame參數(shù)為一個回調(diào)函數(shù)，返回ID值。
cancelAnimationFrame用于取消requestAnimationFrame。

可以看到和setTimeout/setInterval的用法差不多。

var globalID; //requestAnimationFrame的返回ID//動畫處理函數(shù) function animate() {//動畫相關(guān)的操作...globalID=requestAnimationFrame(animate);//參數(shù)為函數(shù)回調(diào) }//使用這個函數(shù)進行動畫停止操作 cancelAnimationFrame(globalID);

---

優(yōu)勢

瀏覽器進行優(yōu)化，動畫更流暢；

按瀏覽器的時間間隔繪制，動畫不會掉幀；

窗口沒激活時或標(biāo)簽頁不可見時，動畫將暫停，省計算資源，減少CPU和內(nèi)存的壓力；

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

---

兼容性

各瀏覽器對于API的兼容性：

可以看到，除了IE9-、OpearMini和AndroidBrowser4.3-之外全部都支持，支持率為91.71%，總體還不錯。

---

封裝代碼

requestAnimationFrame兼容封裝代碼：

(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];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);}; }());

代碼源于：Paul Irish requestAnimationFrame for Smart Animating

---

參考文檔

Timing control for script-based animations

Using requestAnimationFrame

MDN window.requestAnimationFrame()

---

博客名稱：王樂平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

總結(jié)

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

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