[練習] requestAnimationFrame的使用

helloworldcoding 發布于2019-08-22 10:32 / 670人閱讀

摘要：主要原因是因為的單線程機制使得其可能在有阻塞的情況下無法精確到毫秒觸發。另外在隱藏或不可見的元素中將不會進行重繪或回流，大大降低了開銷。

以往JS控制的動畫大多使用setInterval 或者setTimeout 每隔一段時間刷新元素的位置，來達到動畫的效果，但是這種方式并不能準確地控制動畫幀率，盡管主流的瀏覽器對于這兩個函數實現的動畫都有一定的優化，但是這依然無法彌補它們性能問題。主要原因是因為JavaScript的單線程機制使得其可能在有阻塞的情況下無法精確到毫秒觸發。

requestAnimationFrame()方法正是為了滿足高性能動畫的需求而提供的API，通過setInterval方法控制的動畫其調用的間隔由程序員設置，而requestAnimationFrame()無須設置調用間隔，它自動緊跟瀏覽器的繪制的幀率（一般瀏覽器的顯示幀率是60fps，差不多每幀間隔16.7ms）

關于過去的setInterval控制的動畫與requestAnimationFrame()的效果的對比，這里引用‘艾倫’的帖子中的栗子。原帖地址?動畫requestAnimationFrame

setInterval動畫DEMO
requestAnimationFrame動畫DEMO

點擊預覽以上兩個demo可以明顯感受到前者有點卡頓，后者更為流暢。

另外requestAnimationFrame()在隱藏或不可見的元素中將不會進行重繪或回流，大大降低了開銷。關于該方法的其他細節見MDN文檔? window.requestAnimationFrame

以上都是廢話，多寫才能體會。這里我嘗試用該方法寫了個晃動動畫（點擊黑盒晃動，個人練習并沒有考慮兼容性）：

動畫練習DEMO

JS代碼：

//從網頁中獲取一個元素
var box = document.getElementById("box")
shake(box, 500, 15)

//接受三個參數：動畫元素，持續時間，晃動距離
function shake(elm, dur, distance) {
  if (elm) {    
     var dur = dur || 500
     var distance = distance || 10   
//保存原樣式
    var original_css = elm.style.cssText
    elm.addEventListener("click", ani, false)
  } else {
    return "no param"
  }

  function ani() {
    var start = null
   requestAnimationFrame(act)
//requestAnimationFrame每次調用向callback中傳入一個時間戳，時間戳為每次調用的時間點
    function act(time_stamp) {
      if(start === null) start = time_stamp
      var elapsed = time_stamp - start
      if ((elapsed / dur) < 1) {
      //乘以4PI，來回往復兩次， 使用正弦函數得到比例
        elm.style.transform = "translateX(" + distance * Math.sin((elapsed / dur) * 4 * Math.PI) + "px" + ")"
        //調用該方法將返回一個ID值用于結束調用
        var time_id = requestAnimationFrame(act)
      } else {
      //恢復原樣式，停止動畫
        elm.style.cssText = original_css
        cancelAnimationFrame(time_id)
      }
    }
  }
}

在實際開發中，當然盡量使用css動畫，畢竟css動畫性能更優。但是對于一些復雜的動畫，比如有暫停，繼續等復雜交互等動畫還是需要requestAnimationFrame，在張鑫旭大神的這篇文章中CSS3動畫那么強，requestAnimationFrame還有毛線用？深入淺出的闡釋了該方法，另外他的demo中也有一個很直觀的栗子?

該方法其他參考資料mark下：
性能更好的js動畫實現方式——requestAnimationFrame
HTML5探秘：用requestAnimationFrame優化Web動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90817.html

[練習] requestAnimationFrame的使用

摘要：主要原因是因為的單線程機制使得其可能在有阻塞的情況下無法精確到毫秒觸發。另外在隱藏或不可見的元素中將不會進行重繪或回流，大大降低了開銷。以往JS控制的動畫大多使用setInterval 或者setTimeout 每隔一段時間刷新元素的位置，來達到動畫的效果，但是這種方式并不能準確地控制動畫幀率，盡管主流的瀏覽器對于這兩個函數實現的動畫都有一定的優化，但是這依然無法彌補它們性能問題。主...

qylost 2019-08-21 10:49 評論0 收藏0
[練習] requestAnimationFrame的使用

摘要：主要原因是因為的單線程機制使得其可能在有阻塞的情況下無法精確到毫秒觸發。另外在隱藏或不可見的元素中將不會進行重繪或回流，大大降低了開銷。以往JS控制的動畫大多使用setInterval 或者setTimeout 每隔一段時間刷新元素的位置，來達到動畫的效果，但是這種方式并不能準確地控制動畫幀率，盡管主流的瀏覽器對于這兩個函數實現的動畫都有一定的優化，但是這依然無法彌補它們性能問題。主...

Lucky_Boy 2019-08-26 11:23 評論0 收藏0
2018年8月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，頁面的錨鏈接定義錨點錨點鏈接。類似于我們閱讀書籍時的目錄頁碼或章回提示。 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，頁面的錨鏈接 1,定義：錨點,錨點鏈接。常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還...

silenceboy 2019-08-30 11:05 評論0 收藏0
2018年8月所遇知識點整理

摘要：注本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，頁面的錨鏈接定義錨點錨點鏈接。類似于我們閱讀書籍時的目錄頁碼或章回提示。 *注：本文章是在工作過程中所接觸的知識點的整理，涉及的東西比價雜亂，如有錯誤之處，歡迎糾錯與指導一，頁面的錨鏈接 1,定義：錨點,錨點鏈接。常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還...

guqiu 2019-08-23 17:57 評論0 收藏0
html5之canvas

摘要：是新加的標簽，主要有和，的應用是動畫和圖像，的應用是游戲渲染。 HTML5 Canvas canvas是html5新加的標簽，主要有2D和3D，2D的應用是動畫和圖像，3D的應用是游戲渲染。 1. 2D基礎 1.1繪制線 canvas window.onload = function(){ ...

蘇丹 2019-08-26 13:43 評論0 收藏0