成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

[練習(xí)] requestAnimationFrame的使用

Lucky_Boy / 3203人閱讀

摘要：主要原因是因?yàn)榈膯尉€程機(jī)制使得其可能在有阻塞的情況下無(wú)法精確到毫秒觸發(fā)。另外在隱藏或不可見的元素中將不會(huì)進(jìn)行重繪或回流，大大降低了開銷。

以往JS控制的動(dòng)畫大多使用setInterval 或者setTimeout 每隔一段時(shí)間刷新元素的位置，來(lái)達(dá)到動(dòng)畫的效果，但是這種方式并不能準(zhǔn)確地控制動(dòng)畫幀率，盡管主流的瀏覽器對(duì)于這兩個(gè)函數(shù)實(shí)現(xiàn)的動(dòng)畫都有一定的優(yōu)化，但是這依然無(wú)法彌補(bǔ)它們性能問(wèn)題。主要原因是因?yàn)镴avaScript的單線程機(jī)制使得其可能在有阻塞的情況下無(wú)法精確到毫秒觸發(fā)。

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

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

setInterval動(dòng)畫DEMO
requestAnimationFrame動(dòng)畫DEMO

點(diǎn)擊預(yù)覽以上兩個(gè)demo可以明顯感受到前者有點(diǎn)卡頓，后者更為流暢。

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

以上都是廢話，多寫才能體會(huì)。這里我嘗試用該方法寫了個(gè)晃動(dòng)動(dòng)畫（點(diǎn)擊黑盒晃動(dòng)，個(gè)人練習(xí)并沒有考慮兼容性）：

動(dòng)畫練習(xí)DEMO

JS代碼：

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

//接受三個(gè)參數(shù)：動(dòng)畫元素，持續(xù)時(shí)間，晃動(dòng)距離
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每次調(diào)用向callback中傳入一個(gè)時(shí)間戳，時(shí)間戳為每次調(diào)用的時(shí)間點(diǎn)
    function act(time_stamp) {
      if(start === null) start = time_stamp
      var elapsed = time_stamp - start
      if ((elapsed / dur) < 1) {
      //乘以4PI，來(lái)回往復(fù)兩次， 使用正弦函數(shù)得到比例
        elm.style.transform = "translateX(" + distance * Math.sin((elapsed / dur) * 4 * Math.PI) + "px" + ")"
        //調(diào)用該方法將返回一個(gè)ID值用于結(jié)束調(diào)用
        var time_id = requestAnimationFrame(act)
      } else {
      //恢復(fù)原樣式，停止動(dòng)畫
        elm.style.cssText = original_css
        cancelAnimationFrame(time_id)
      }
    }
  }
}

在實(shí)際開發(fā)中， 當(dāng)然盡量使用css動(dòng)畫， 畢竟css動(dòng)畫性能更優(yōu)。但是對(duì)于一些復(fù)雜的動(dòng)畫，比如有暫停，繼續(xù)等復(fù)雜交互等動(dòng)畫還是需要requestAnimationFrame，在張?chǎng)涡翊笊竦倪@篇文章中CSS3動(dòng)畫那么強(qiáng)，requestAnimationFrame還有毛線用？ 深入淺出的闡釋了該方法， 另外他的demo中也有一個(gè)很直觀的栗子?

該方法其他參考資料mark下：
性能更好的js動(dòng)畫實(shí)現(xiàn)方式——requestAnimationFrame
HTML5探秘：用requestAnimationFrame優(yōu)化Web動(dòng)畫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106991.html

相關(guān)文章

  • [練習(xí)] requestAnimationFrame的使用

    摘要：主要原因是因?yàn)榈膯尉€程機(jī)制使得其可能在有阻塞的情況下無(wú)法精確到毫秒觸發(fā)。另外在隱藏或不可見的元素中將不會(huì)進(jìn)行重繪或回流，大大降低了開銷。 以往JS控制的動(dòng)畫大多使用setInterval 或者setTimeout 每隔一段時(shí)間刷新元素的位置，來(lái)達(dá)到動(dòng)畫的效果，但是這種方式并不能準(zhǔn)確地控制動(dòng)畫幀率，盡管主流的瀏覽器對(duì)于這兩個(gè)函數(shù)實(shí)現(xiàn)的動(dòng)畫都有一定的優(yōu)化，但是這依然無(wú)法彌補(bǔ)它們性能問(wèn)題。主...

    qylost 評(píng)論0 收藏0

  • [練習(xí)] requestAnimationFrame的使用

    摘要：主要原因是因?yàn)榈膯尉€程機(jī)制使得其可能在有阻塞的情況下無(wú)法精確到毫秒觸發(fā)。另外在隱藏或不可見的元素中將不會(huì)進(jìn)行重繪或回流，大大降低了開銷。 以往JS控制的動(dòng)畫大多使用setInterval 或者setTimeout 每隔一段時(shí)間刷新元素的位置，來(lái)達(dá)到動(dòng)畫的效果，但是這種方式并不能準(zhǔn)確地控制動(dòng)畫幀率，盡管主流的瀏覽器對(duì)于這兩個(gè)函數(shù)實(shí)現(xiàn)的動(dòng)畫都有一定的優(yōu)化，但是這依然無(wú)法彌補(bǔ)它們性能問(wèn)題。主...

    helloworldcoding 評(píng)論0 收藏0

  • 2018年8月所遇知識(shí)點(diǎn)整理

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

    silenceboy 評(píng)論0 收藏0

  • 2018年8月所遇知識(shí)點(diǎn)整理

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

    guqiu 評(píng)論0 收藏0

  • html5之canvas

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

    蘇丹 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<