解说 window.requestAnimationFrame(

window.requestAnimationFrame() 这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需要。即可以这样说，该方法接受一个函数为参，该函数会在重绘前调用。
因浏览器不同，为了兼容性，有三种格式的：
requestID = window.requestAnimationFrame(callback);
requestID = window.mozRequestAnimationFrame(callback);
requestID = window.webkitRequestAnimationFrame(callback);
requestID = window.oRequestAnimationFrame(callback);
requestID = window.msRequestAnimationFrame(callback);

callback 会收到一个参数，这个 DOMHighResTimeStamp 类型的参数指示当前时间距离开始触发 requestAnimationFrame 的回调的时间。

window.cancelAnimationFrame(requestID) 可以取消这个回调函数。

示例（进度条动画）：
<code>
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var ele = document.getElementById("test");
var progress = 0;
function step(timestamp) {
progress += 0.05;
ele.style.width = progress + "%";
ele.innerHTML=progress + "%";
if (progress < 100) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
ele.style.width = "1px";
progress = 0;
requestAnimationFrame(step);
}, false);
</script>
</code>

参考：http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html