移動前端工做的那些事---前端製做之動畫效率問題簡析

動畫特效方面，尤爲兼容安卓系統，就和互聯網端兼容IE6同樣麻煩。好多效果不錯的創意都由於不兼容安卓系統而夭折。歸根到底仍是由於安卓瀏覽 器性能的問題。這裏篇外話一下，安卓手機的硬件能夠甩蘋果一條街。但在瀏覽器上表現的則相反。如今安卓系統已經發展到android 4.X了.可分配給瀏覽器的內存仍是少的可憐！貌似不足10%; 因此一些很流暢的動畫效果在IOS上跑一點壓力沒有。但在android上跑卡的要命！但願android 5.0時能夠多給點內存在瀏覽器上，儘可能提高一下瀏覽器的性能比。

 

言歸正傳，在移動端動畫效果上，使用css3動畫要比jquery動畫效率高的多。在安卓手機上表現尤爲明顯！因此移動端動畫以css3動畫爲優先。

 

咱們知道css3動畫分爲兩大類： animation和transform，這二者根據實際項目需求來分別使用。前者爲關鍵幀動畫，後者爲變換動畫。關鍵幀動畫多用於可循環動畫。而變換動 畫多用於一次性動畫。固然這也不是絕對的。二者是能夠相互轉換使用的。究竟這二者在移動端那個更省瀏覽器性能，我參考了大量的文檔也沒有得出什麼結論來。 總之我的認爲差很少吧。關鍵仍是代碼寫的是否合理。方法是否應用得當。

 

經過作這個實際項目的大量效果測試得出一些本身的觀點。你們僅供參考。

 

第一，先說說transform：

 

好比有一個需求，我須要將一個總體元素從下至上移動到屏幕上，這裏有不少辦法來加以實現。舉例：要想讓一個元素動起來，咱們須要給這個元素先加一個原始的動畫樣式；

#erjidiv{

position: absolute; 

width: 100%; 

heigth:600px;

top: 0px; 

left: 0px; 

background-color:#000; 

-webkit-transform:translateY(100%);  

-webkit-transition:-webkit-transform 0s 0s;

}

而後經過某些事件接口修改這個樣式便可

$("#erjidiv").css({

     "-webkit-transform":"translateY(0%)",

     "-webkit-transition":"-webkit-transform 0.5s ease-out 1s",

 })

 

這樣經過位移Y軸translateY的方式.延遲1s 由快變慢的方式完成了動畫。

 

在互聯網中運用的CSS3樣式。你們很習慣都使用 "-webkit-transition":"all 0.5s ease-out 1s",

但在移動端爲了性能問題不推薦這麼作。all所包含的是全部屬性。若是隻是某一處只運用了該動畫的話。那麼沒有什麼太大的區別，至少肉眼看不出來。但若是 在同一時間實行多處元素動畫的話。使用all屬性就會有卡頓現象。而只寫改變某個屬性的話則該現象基本能夠杜絕了。尤爲在安卓上表現明顯。因此此處我只使 用了-webkit-transform屬性。

 

有童靴會問，我改變其top的座標值不是同樣能夠移動嘛；好比這樣：

 

#erjidiv{

position: absolute; 

width: 100%; 

heigth:600px;

top: -600px; 

left: 0px; 

background-color:#000; 

-webkit-transition:top 0s 0s;

}

 

 

$("#erjidiv").css({

     "top":"0px",

     "-webkit-transition":"top 0.5s ease-out 1s",

 })

 

是的，這樣依然能夠達到該效果。但這麼作顯然在動畫效率上不高。我參考了一些文章，說這麼作效果還不如jquery動畫效率高。這點我沒有拿jquery 動畫和這個比較過。但這個和前者比較過。確實從流暢度來說不如前者。尤爲是同一時間多個元素同時執行動畫。另外，像top、left、width、 height等這些css基礎屬性在移動端不到無可奈何的狀況下仍是少參與動畫的好。真的是很影響動畫效率。咱們使用css3的-webkit- transition的方式來作動畫。與其門當戶對配合的也應該是css3的屬性-webkit-transform，二者完美結合才能在最大程度上提高 動畫效果。下降瀏覽器內存損耗。

 

此外，有童靴極可能使用互聯網作動畫的方式來作移動端動畫（之前我也這麼幹過……）好比一個元素在靜止狀態時，採用了樣式A。當它:hover時採用樣式 B。這樣就實現了動畫。把這種製做動畫的方式搬到移動端同樣也是能夠的。其原理無非是兩個樣式的切換。那麼根據這個原理上面的需求還能夠變成這樣：

 

 

 

.style1{

position: absolute; 

width: 100%; 

heigth:600px;

top: 0px; 

left: 0px; 

background-color:#000; 

-webkit-transform:translateY(100%);  

-webkit-transition:-webkit-transform 0s 0s;

}

 

 

.style2{

position: absolute; 

width: 100%; 

heigth:600px;

top: 0px; 

left: 0px; 

background-color:#000; 

-webkit-transform:translateY(0%);  

-webkit-transition:-webkit-transform 0.5s ease-out 1s;

}

 

$("#erjidiv").removeClass("style1").addClass("style2");

 

這樣，經過移除和添加樣式也能夠實現上面的需求。那麼這種辦法是否是效率也比較高呢？

經過實際測試，當多個元素同時動畫的時候。使用修改其樣式也就是第一種辦法要比這種添加和刪除樣式高效的多。因此，若是使用-webkit- transform這種動畫方式的時候，最好的方案就是第一種，使用js修改其動畫樣式的效率是最高的。其餘的方法效率都不高。不推薦在移動端上使用。

 

 

第二，再說說animation：

 

嚴格意義上來說。transform方式不算是動畫。只能算是變換。而animation纔是正宗的動畫。使用animation方式作動畫，咱們不得不 提到關鍵幀@-webkit-keyframes。經過對其起始狀態和終點狀態之間的過程設置來造成動畫。關於關鍵幀動畫的使用就不舉例說明了。百度一下 有不少。

 

animation動畫我我的理解多用於循環動畫的地方。在這種動畫需求下使用效率是最高的。優勢是能夠任意添加動做狀態。缺點我的認爲是不易進行控制。 最大的缺陷是使用js沒法獲取到關鍵幀裏面的動畫狀態參數。我想動態的改變關鍵幀裏的變化數值，但沒法作到。這裏面的值只能寫死或是使用百分比來代替具體數值。在移動端各類適配的需求下。很難有太靈活的變化。不過好像有js插件能夠寫關鍵幀動畫。但我因爲時間問題，尚未這方

面的詳細研究。若是哪位同仁有這方面的經驗，能夠賜教一二。

 

之因此說它不易控制是沒有一個好的啓動切入點。目前我所知的辦法就是當我要啓動一個關鍵幀動畫的時候，我須要給這個元素臨時添加一個樣式。

 

這個樣式裏寫入了引用關鍵幀動畫的-webkit-animation-name：XXX，而後設置週期、播放次數、變化方式等等參數。好比：

 

.fangda {

-webkit-animation-name: fangda;

-webkit-animation-duration: 1s;

-webkit-animation-timing-function: ease-out;

-webkit-animation-iteration-count: infinite;

}

 

@-webkit-keyframes fangda {

  0% {-webkit-transform:scale(1,1)}

 50% {-webkit-transform:scale(1.2,1.2); }

100% {-webkit-transform:scale(1,1); }

}

 

 

$("#erjidiv").addClass("fangda");

 

這樣當我給元素添加樣式後，動畫開始啓動。這種方法其實又回到了剛纔在談到transform方式時的用到的第三種方法。當我一瞬間同時使用好幾個關鍵幀 動畫時，使用這種添加的方式沒有修改其樣式的效率高。會形成一瞬間卡頓的現象。這個尤以在安卓系統手機上表現明顯。但第一種方法可使用JS修改其樣式。 而關鍵幀動畫卻修改不了。

 

後來爲了提升性能。想到不如先把樣式加上。但我先讓其暫停。想讓它運行的時候再使用，因而乎想到了關鍵幀動畫裏有animation-play- state這個屬性來控制暫停和運行。測試後果真能夠。測試系統（android4.0以上，IOS6以上）。經過對比這種控制暫停，而後再讓其啓動的方 式比單一添加樣式的效率高不少。

 

.fangda {

-webkit-animation-name: fangda;

-webkit-animation-duration: 1s;

-webkit-animation-timing-function: ease-out;

-webkit-animation-iteration-count: infinite;

-webkit-animation-play-state:paused;

}

 

 

@-webkit-keyframes fangda {

  0% {-webkit-transform:scale(1,1)}

 50% {-webkit-transform:scale(1.2,1.2); }

100% {-webkit-transform:scale(1,1); }

}

 

$("#erjidiv").css("-webkit-animation-play-state","running");//根據需求再啓動

 

 

經過以上的修正能夠大大提升css3動畫在移動端瀏覽器上效果的提高。即使在安卓瀏覽器上也能有較好的體現。

 

最後，再說說其餘方面的我的心得；考慮到移動端瀏覽器性能問題。儘可能避免同時多個動畫。關鍵幀動畫不用時，要麼暫停掉。要麼直接刪除樣式。我的更傾向於後者。有時候爲了提升流暢度。必要時還要打開其渲染3d功能。在全局樣式中進行設置以下樣式：

 

-webkit-transform-style:preserve-3d;

-webkit-backface-visibility:hidden;

-webkit-transform:translate3d(0,0,0)

 

另外，瀏覽器在加載過程當中會有一個預存渲染功能（專業術語叫什麼忘記了，我的命名的便於理解），就是當要觸發某些動畫樣式的時候，最好瀏覽器事先有過渲 染，這樣在執行起來的時候就會更加流暢。（由於節省了渲染時間）這也就很好的解釋了爲何採用添加的方式沒有改變其樣式效率高！不添加動畫樣式時。瀏覽器 事先是沒有渲染的。添加時它須要臨時渲染再執行動畫，這須要時間。而改變樣式倒是在瀏覽器事先已經渲染好了動畫，只不過不執行或是在暫停狀態。須要時就可 以立刻啓動。因此正是由於有了這個預存渲染的功能。再採用合適的方式時，就能縮短瀏覽器渲染時間，減小卡頓現象的產生的可能！真正的作到了提升移動端瀏覽 器css3動畫的效率問題！

 

 

原文：http://blog.sina.com.cn/s/blog_3f1fc8950102v0un.html