css實現動畫效能優化

一、使用css，jquery，canvas製作動畫

#1、Canvas

優點：效能好，強大，支援多數瀏覽器（除了IE6、IE7、IE8），畫出來的圖形可以直接儲存為.png 或.jpg的圖形；

缺點：依賴HTML，只能透過腳本繪製圖形，沒有實現動畫的API（依賴事件和定時器更新）；由於在canvas 上以程式設計方式顯示的文字其實就是點陣圖，因此搜尋爬行器將完全忽略文字。文字內容也無法被螢幕閱讀器辨識。

2、css3

優點：簡單且與內容分離、css動畫不觸發layout和paint；（這些屬性的修改不會觸發layout和paint：backface-visibility、opacity、perspective 、perspective-origin、transform）；

缺點：有瀏覽器相容性問題、安卓手機會出現卡頓、受排版引擎的限制，與整個頁面的dom結構息息相關。

3、JQuery

優點：沒有相容性問題

缺點：每一幀，都要進行repaint、recomposite（非常耗時）；

總結：在行動端動畫效果上，使用css3動畫要比jquery動畫效率高的多。在安卓手機上表現尤其明顯！所以行動端動畫以css3動畫為優先，jquery只能用來簡單處理應用邏輯。 css3動畫是用來為內容佈局加上特效的通用解決方案，但是在效能堪憂的行動瀏覽器上很可能會受排版效能所限，達不到理想的效果。而對效能有要求的特定場景，例如遊戲，用canvas會有很大的提升。

（推薦教學：CSS入門教學）

二、css3在行動端出現卡頓問題

css3製作的動畫在ios上跑的66的，但是在安卓上有時會出現卡頓現象。不妨從下面幾點找問題。

a、是否導致layout

如果是，盡可能將動畫元素absolute或fixed化以避免影響文件樹，以減少重排.

b、是否啟用硬體加速

「用到了CSS3動畫」和「開啟了硬體加速」是兩件事情，雖然前者有可能導致後者。
開啟硬體加速在webkit中有神奇的萬金油：opacity: 1;或-webkit-backface-visibility: hidden;。

c、是否有高消耗的屬性（css shadow、gradients、background-attachment: fixed等）

有的話，圖片也是一種選擇。這算是用空間換時間的優化了。

d、repaint的面積

如果是，只好縮小動畫面積了。這一步驟的最佳化有限;

e、盡量使用 transform 產生動畫，避免使用 height,width,margin,padding 等；如以下範例1、範例2。

PS：使用 transform，瀏覽器只需要一次產生這個元素的點陣圖，並在動畫開始的時候將它提交給 GPU 去處理 。之後，瀏覽器不需要再做任何佈局、 繪製以及提交點陣圖的操作。從而，瀏覽器可以充分利用 GPU 的專長快速地將點陣圖繪製在不同的位置、執行旋轉或縮放處理。簡而言之，transform 動畫由GPU控制，支援硬體加速，並不需要軟體方面的渲染

三、動畫過程有閃爍（一般出現在動畫開始）

解決方法：

.cube {
 
   -webkit-backface-visibility: hidden;
 
   -moz-backface-visibility: hidden;
 
   -ms-backface-visibility: hidden;
 
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
 
   -moz-perspective: 1000;
 
   -ms-perspective: 1000;
 
   perspective: 1000;
 
   /* Other transform properties here */
 
}

在webkit核心的瀏覽器中，另一個行之有效的方法是：

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

相關影片教學推薦：css影片教學

以上是css實現動畫效能優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！