---

簡介

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

---

用法

基本語法：

requestAnimationFrame(callback)//callback為回調函數 cancelAnimationFrame(id) //requestAnimationFrame的返回值

requestAnimationFrame參數為一個回調函數，返回ID值。
cancelAnimationFrame用于取消requestAnimationFrame。

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

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

---

優勢

瀏覽器進行優化，動畫更流暢；

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

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

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

---

兼容性

各瀏覽器對于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

總結

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

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