js利用H5的requestAnimationFrame（）API实现动画效果

为何要使用requestAnimationFrame：

• 咱们知道，浏览器实现动画绘制无非就是CSS3的动画属性transition，aniamtion和JavaScript的setTImeOut和setInterval方法（进行DOM的样式循环改变达到动画效果）。说到这可能不少同窗都有疑问了，既然有CSS的动画属性这么方便的东西了，为什么还要用setTimeOut等js方法这么麻烦呢？咱们首先来解决这个疑问。
  

•  CSS3的动画属性与JavaScript的动画方法：
  

1. 一个事物的存在必有其存在的道理，api也不例外，否则早被淘汰了。首先CSS3的动画属性是存在兼容问题的，最明显的就是IE10以后才兼容。而目前主流的向下兼容的标准仍是要达到IE9的，因此setTImeOut等js方法仍是主流的动画解决方案。
2. 有些动画效果CSS3没法实现，如改变元素scrollTop的值进行滚动，这样就只能使用js的相关方法了。
3. CSS3的动画没法实现过于复杂的动画效果，如CSS3支持控制动画速度赛贝尔曲线的数值有限，更复杂的动画效果得使用js结合相关算法才能完成
• 接着回到正题哈， 那requestAnimationFrame有setTimeOut和setInterval又有和区别呢，嗯，接下来就是正题了。
  

• setTimeOut和setInterval出现的问题：

1. 首先，咱们得知道动画的渲染是一帧一帧的进行的，每一帧就是动画的一个静止状态，每一帧连起来就成为了一个动画。所以每一帧的时间间隔要足够短动画才显得平滑流畅，但每一帧又不能间隔得过短，由于浏览器每一秒的渲染能是有限的，并且屏幕的刷新能力也是有限的，大多数的显示器刷新频率是60H也就是每秒60帧，所以浏览器的重绘频率不会超过显示器的刷新频率。
2. 因此每一帧大约17秒就是最佳的重绘间隔。那使用就直接使用setTimeOut或者setInterval，间隔设置为17不就得了？但这样仍是不行的。
1. 因浏览器的毫秒不精确：浏览器的计时器精度并不是精确到毫秒级的，IE8的精确度是15ms多一点，而IE9等大多数的浏览器精确度都在4ms差很少。因此难以保证动画最佳的时间间隔。
2. 不一样的浏览器渲染能力不一样，所以并不是每一帧17ms就是最佳渲染间隔。
3. 在不须要动画的地方，如后台标签页，动画任然在运行，消耗CPU的性能。
• 所以，h5的requestAnimationFrame就是解决以上问题的。
  

• requestAnimationFrame的特色：

1. requestAnimationFrame会把每一帧中全部的DOM操做集中起来，在一次重绘或者重排中就完成。
   
2. requestAnimationFrame重绘或者重排的时间间隔是系统的时间间隔，由于不一样的浏览器的系统时间间隔不一样，requestAnimationFrame将会保持最佳的绘制间隔，即不会由于绘制间隔时间太短而形成浏览器渲染能力跟不上，也不会由于绘制间隔时间过长，而形成动画卡顿。这样就能在不一样的浏览器中实现最佳的绘制效果。
   
3. 在隐藏或者不可见的元素中，requestAnimationFrame将不会进行重排或者重绘，而运行在页面没有激活的状况下，如requestAnimationFrame运行在后台标签页中，动画将会暂停，有效的节省了CPU的开销。

• 那么，该如何使用requestAnimationFrame呢？

requestAnimationFrame的具体使用：

• requestAnimationFrame使用很是简单，只需传入改变DOM的函数，而后反复调用requestAnimationFrame便可达到动画效果了。requestAnimationFrame返回一个整数型请求id的，能够用cancelAnimationFrame函数去取消传入requestAnimationFrame的回调函数。具体使用能够看MDN的教程。

后话：

•  以上都是我看了高程三和其余大佬的博客后进行的总结，算是简化版的教程吧，具体的或者有demo的请看大佬们的总结吧。
• 鑫佬的
• 有demo的
• 有分析demo的
• 淘宝前端团队