css3製做動畫性能問題

這篇文章主要講的是怎樣製做流暢動畫，特別是針對移動端。在這裏我首先介紹製做動畫的幾種方法的優缺點；接着會着重介紹用css3製做動畫的注意事項。

1、用canvas、css3、jquery製做動畫

Canvas

優勢：性能好，強大，支持多數瀏覽器（除了IE6、IE7、IE8），畫出來的圖形能夠直接保存爲 .png 或者 .jpg的圖形；

缺點：依賴於HTML，只能經過腳本繪製圖形，沒有實現動畫的API（依靠事件和定時器更新）；因爲在 canvas 上以編程方式顯示的文本其實就是位圖，所以搜索爬行器將徹底忽略文本。文本內容也沒法被屏幕閱讀器識別。

css3

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

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

Jquery

優勢：沒有兼容性問題；

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

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

2、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控制，支持硬件加速，並不須要軟件方面的渲染

三、動畫過程有閃爍（通常出如今動畫開始）

-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;

例子1：

.ball-running { animation: run-around 4s infinite; } 

@keyframes run-around {

0%: { top: 0; left: 0; } 

25% { top: 0; left: 200px; } 

50% { top: 200px; left: 200px; } 

75% { top: 200px; left: 0; } 

}

例子2：

.ball-running { animation: run-around 4s infinite; } 

@keyframes run-around {

0%: { transform: translate(0, 0); } 

25% { transform: translate(200px, 0); } 

50% { transform: translate(200px, 200px); } 

75% { transform: translate(0, 200px); } 

}

例子2會比例子1看起來流暢多了。由於 transform 屬性不會觸發瀏覽器的 repaint，而 left 和 top 則會一直觸發 repaint；