requestAnimationFrame 实现更流畅，高效的动画效果

学习笔记：requestAnimationFrame()

requestAnimationFrame()
是浏览器提供的一个统一帧管理、提供监听帧的API。这个方法原理跟setTimeout/setInterval差不多，setTimeout/setInterval都是要指定好间隔时间，而requestAnimationFrame
在运行时，浏览器会自动检测性能，实现最优的动画帧频率。

简单的浏览器兼容

window.requestAnim<span style="line-height: 25.6px; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;">ation</span>Frame = (function() {
return window.requestAnimationFrame ||

<span style="white-space:pre">	</span>   window.webkitRequestAnimationFrame ||

<span style="white-space:pre">	</span>   window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

<span style="white-space:pre">	</span>   window.msRequestAnimationFrame ||
function(callback) {
<span style="white-space:pre">	</span> return window.setTimeout(callback, 30);
};
})();

一般用法递归循环：
function
loop(){

requestAnimationFrame(loop);

/*
.... */

}
可以通过 window.cancelAnimationFrame() 来取消动画。

var
raf = requestAnimationFrame(callback); cancelAnimationFrame(raf
);