1、在我们学习 requestAnimationFrame 我们县里啊了解下这个新兴的动画制作方法
HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:
你可以用CSS3的 animattion+keyframes;
你也可以用css3的 transition;
你还可以用通过在 canvas上作图来实现动画
也可以借助 jQuery动画相关的API方便地实现;
当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来
实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。
现在又多了一种实现动画的方案，那就是还在草案当中的window.requestAnimationFrame()方法。
2、window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了，后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。
也可这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，
3、requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
3、优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。
举一个例子来证明下 requestAnimationFrame 强大吧 ！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// 做浏览器适配
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitrequestAnimationFrame ||
window.mozrequestAnimationFrame ||
window.msrequestAnimationFrame ||
window.orequestAnimationFrame;
window.cancelAnimationFrame =
window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.msCancelAnimationFrame ||
window.oCancelAnimationFrame;
// 获取box
var box = document.querySelector("#box");
// 有返回值 取消时使用
var _id = window.requestAnimationFrame(run);
console.log(_id)
// 每秒60帧 不用去考虑性能问题
function run(time){
// console.log(time);
var width = parseFloat(getComputedStyle(box).width);
if(width>=600){
window.cancelAnimationFrame(_id);
}else{
window.requestAnimationFrame(run);
box.style.width = width + 1 + "px";
}
}
</script>
</body>
</html>
