HTML5 requestAnimationFrame( ) 动画API

简介

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