javascript與css3動畫學習筆記


  當Html5,css3已漸漸成為主流的時候,我還非常習慣的用js去做一些簡單的動畫。因為在桌面瀏覽器上, 並非所有的都支持css3。用戶也倒是很奇怪,用戶習慣並不是每個用戶都可以被培養。總有不少人會覺得win7.win8沒xp好用。但手機方面就大不一樣了,手機瀏覽器對html5和css3的支持還是很不錯的。但手機硬件處理能力卻又十分有限。在四核、八核手機橫行的今天,依然有像我這樣使用雙核或單核手機的。js雖好,單奈何接觸不多,調不好那種感覺。一個簡單的頁面滑動,在i7的pc上運行十分流暢,可是,在我的雙核手機上就卡、頓、卡、頓。令人十分郁悶。為此,我也是尋找了很久很久,看了很多很多。終於在不就之前,找到了一種還算簡單的方法:使用css3去執行動畫。

  在以前,對於動畫除了Jquery的animate等動畫函數外,更多的是使用setTimeout,setInterval,這樣循環的去改變一個元素的margin、width、top等屬性。也正是如此,才有了我的困惑。

  首先,setTimeout,setInterval 這貨並非你設置0ms它就能一直一直的去執行。曾經在iscroll里調試的時候無意中發現了這個秘密。原來Timer延時的計算依靠的是瀏覽器的內置時鍾,而時鍾的精確度又取決於時鍾更新的頻率。IE8及其之前的IE版本更新間隔為15.6毫秒。完了,我想它10ms執行1px位移,它還不能准時的干這事。

  而卡又是怎么回事呢?卡,因為代碼寫的不好。畢竟js是單線程的,一旦有耗時的動作那么UI就可能不響應了。雖然我們使用了setTimeout,但正是因為setTimeout讓我們看上去界面沒死可動作卻又不流暢了。因為這次setTimeout執行之后,在下次執行前,中間這個間隔里很可能遇到另一個耗時的動作,那么,setTimeout的執行就無限后延。然后呢?卡!然而,卡還能有下一個原因,改變原始屬性時不小心觸發瀏覽器Layout(即:重布局)。這個問題說它不耗時呢,卻又耗時,說它耗時呢,很多時候卻又可以忽略。但很多時候其實是不能忽略的。

  除了上面這兩段,還有一個問題,就是在很多手機上總感覺是一幀一幀的,而且還可能是一幀長一幀短。這真是能把人都搞廢的節奏。為何會這樣呢,依然和settimeout的推遲有一定的關系。丟幀。這個問題有涉及到顯示器的刷新頻率問題。實在太復雜了。

 

  最后選擇了CSS3,js動態的改變元素的屬性,使用transition來控制動畫執行時間。舉個例子:

<div id="test" style="transition:all 1s ease; width:100px;" ></div>

js:

$("#test").width(200);

 

  這樣1秒之后這個div的寬度會變成200px。不是孫悟空變桃子一樣瞬間變大,慢慢的趕腳,不卡不頓。而且使用css動畫有個好處,它不受耗時js的影響。雖然瀏覽器中UI線程與js線程是互斥,但這一點對css動畫不成立,並且很多瀏覽器還能啟用硬件加速(比如:Chrome)。雖然瀏覽器重布局普通情況下感覺不是很明顯,但還是應該盡量避免大面積的重布局。so在動畫元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);這樣瀏覽器會獨立渲染這一層。即便是重布局無法避免,這樣面積也小些。而使用translate取代margin也確實是一個十分明智的決定。

  詳細資料傳送門 Javascript高性能動畫與頁面渲染

  最后附上一些常用的改變時會觸發重布局的屬性:  
   

   width 
   height 
   padding 
   margin 
   display 
   border-width 
   border 
   min-height

 

  不足之處煩請補充,諒解。

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com