requestAnimationFrame实现动画

大部分浏览器支持的最小绘制间隔是16.7ms，举例，如果你使用setInterval(function(){}, 10)即每隔10ms绘制一次页面，将会导致部分动画帧的丢失，造成动画的不连贯卡顿，16.7ms是1000/60的计算结果，即浏览器最大支持每秒绘制60帧

requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态的话，动画会自动暂停，有效节省了CPU开销，且会合理安排浏览器的最小绘制间隔，不会造成动画卡顿

可以直接通过requestAnimationFrame(callback)调用，接收一个函数作为回调，返回一个ID，通过把该ID传给window.cancelAnimationFrame()可以取消该动画

兼容性解决方案

(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'] ||    // Webkit中此取消方法的名字变了
window[vendors[x] + 'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (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);
};
}
}());

参考链接：

http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html