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的
• 淘寶前端團隊