走進HTML5-學習requestAnimationFrame

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

在 Web 應用中，實現動畫效果的方法比較多，JavaScript 中能夠經過定時器 setTimeout 來實現，Css3 可使用 transition 和 animation 來實現，HTML5 中的 canvas 也能夠實現。除此以外，HTML5 還提供了一個專門用於請求動畫的 API，即 requestAnimationFrame(rAF) 顧名思義就是請求動畫幀。

屏幕繪製頻率

屏幕繪製頻率即圖像在屏幕上更新的速度，也是屏幕上圖像每秒鐘出現的次數，它的單位是赫茲(HZ),對於通常的筆記本電腦，這個頻率大概是60HZ。所以，當你對着電腦屏幕什麼也不作的狀況下，顯示器也會以以每秒60次的頻率在不斷地更新屏幕上的圖像，那麼咱們爲何感受不到這個變化呢？那是由於人的眼睛有 視覺停留效應 即前一刻畫面留在大腦印象還沒消失，緊接着後幅畫面就跟上來了，這中間只隔了16.7ms(1000/60≈16.7)，因此會讓你誤覺得屏幕上的圖像是靜止不動的。

原理

window.requestAnimationFrame()告訴瀏覽器——你但願執行一個動畫，而且要求瀏覽器在下次重繪以前調用指定的回調函數更新動畫。該方法須要傳入一個毀掉函數做爲參數，該回調函數會在瀏覽器下次重繪以前執行。

該函數有返回值，建議使用一個ID進行標識，沒有別的意義，能夠傳給window.cancelAnimationFrame()取消回調函數

總結

1. 頁面刷新前執行一次
2. 1000ms 60fps -> 16ms
3. cancelAnimationFrame 用來取消
4. 用法和 setTimeout 相似
5. 兼容性查看caniuse

若你想在瀏覽器下次重繪以前繼續更新下一幀動畫，那麼回調函數自身必須再次調用window.requestAnimationFrame()

兼容

對於不一樣的瀏覽器，requestAnimationFrame 這個api的名字也略有差別，針對低版本瀏覽器，這裏寫出對應的兼容性寫法封裝。

// requestAnimationFrame 的封裝
/** * 針對不一樣內核的瀏覽器的API寫法不一樣進行兼容 */
window.requestAnimaFrame = (function(){
  return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60)
        }
})();
複製代碼

// cancelAnimationFrame
/** * 針對不一樣內核的瀏覽器的API寫法不一樣進行兼容 */
window.cancelAnimFrame = (function(){
  return window.cancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        function (id) {
          window.clearTimeout(id)
        }
})
複製代碼

代碼示例

<div id="a" style="width: 100px; height: 100px; background-color: red; position: absolute;" >
</div>

<script> /** * 定義一個div盒子，動畫設置向右平移 500px * * 注：這裏使用的requestAnimaFrame和cancelAnimFrame方法名爲本身封裝的方法 */ let start = 0, end = 500, ele = document.querySelector('#a'), req; let f = function () { start += 10 ele.style.left = start + 'px' // 距離頁面左邊的距離 let left = ele.getBoundingClientRect().left if(left < end) { req = requestAnimaFrame(f) } else { cancelAnimFrame(req) } } </script>
複製代碼

---

但願對讀完本文的你有幫助、有啓發，若是有不足之處，歡迎批評指正交流！

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

辛苦整理良久，還望手動點贊鼓勵~

---

'摘抄'不是單純的「粘貼->複製」，而是眼到，手到，心到的一字一句敲打下來。

博客聲明:全部轉載的文章、圖片僅用於做者本人收藏學習目的，被要求或認爲適當時，將標註署名與來源。若不肯某一做品被轉用，請及時通知本站，本站將予以及時刪除。