一、transform和opacity動畫為什么性能好

opacity動畫為什么性能好

opacity單詞意思為透明度，直觀視覺效果就是顏色變淡了，但最終顯示的顏色其實仍然可以用RGB三個通道來表示，從數(shù)值運算的角度來看，它實際上表示了它采用一般混合策略和其他顏色進(jìn)行混合時的比例，也就是：

例如在網(wǎng)頁默認(rèn)的白底色上rgba(255,255,255)顯示一個包含透明度的rgba(218,89,97,0.8)顏色， 那么顏色的RGB分量都按照上述公式進(jìn)行計算就得到rgb(225,122,128),用取色器拾取一下渲染出來的點，結(jié)果和上述理論是一致的：

所以opacity這個屬性本身就是用在重疊部分顏色處理的過程中使用的，對于分層的圖原來說就可以看作是與圖層內(nèi)容無關(guān)的系數(shù)，因為合成過程中當(dāng)前層中所有像素都需要經(jīng)歷上面的顏色混合公式，所以opacity的動畫過程既不會影響布局，也不需要重繪。這樣圖層中保存的RGB像素數(shù)據(jù)的緩存在動畫過程中也就不需要更新了，如果不使用opacity屬性的話，每一幀對于變化部分都需要手動重計算RGB顏色值（這也就相當(dāng)于是重繪了），因為這些區(qū)域的像素顏色一直都在變化，緩存也就沒有意義?，F(xiàn)在再來看看opacity的性能優(yōu)勢，就相對容易理解了。

transform動畫為什么性能好

transform的性能優(yōu)勢和opacity的原因是一致的，而不是因為有“硬件加速”的加持。transform屬性支持的位移函數(shù)translate( )，縮放比例函數(shù)scale( )，斜切函數(shù)skew( )和旋轉(zhuǎn)函數(shù)rotate( )都可以轉(zhuǎn)換為線性映射的形式，也就是matrix( )表示的方式，簡單來說就是所有transform實現(xiàn)的效果都可以對原坐標(biāo)系中的點[x,y]按照如下的齊次矩陣進(jìn)行計算得到變換后的點坐標(biāo)[x’,y’]：

齊次矩陣的系數(shù)是設(shè)定transform變換時傳入的，是一個已知項，而使用三維的齊次矩陣是因為二維坐標(biāo)的點在變換時會產(chǎn)生常數(shù)項（主要是平移變換），而如果以二維矩陣作為參數(shù)來計算時，以x坐標(biāo)變換為例，結(jié)果的形式就是x’=ax+by，其中是沒有常量的，所以只能采用一個三維齊次矩陣來表示，但計算中的第三個坐標(biāo)實際上并不需要使用。更多的關(guān)于變換的數(shù)學(xué)原理，感興趣的讀者可以自行查閱資料。

所以transform在動畫過程中也不需要改變緩存的記錄，而在圖層合成時遍歷當(dāng)前層的點然后用上述公式來計算出對應(yīng)的新坐標(biāo)點就可以了，它也可以視作一種與圖層內(nèi)容無關(guān)的變換，圖層中的元素首次生成的位圖信息緩存可以被反復(fù)使用。比如一段平移動畫，如果使用絕對定位+改變left值的方式來實現(xiàn)，就需要不斷計算動畫元素的布局并更新它的像素信息，但如果使用translate來實現(xiàn)，動畫元素在文檔流中的位置并不需要改變，無論后續(xù)平移到多遠(yuǎn)，都可以使用位圖緩存中保存的初始位置信息，再加上變換矩陣的影響在層合并時計算出來，同樣既不影響布局，也不需要重繪，這就是它高性能的原因。

小結(jié)

opacity和transform動畫的高性能是由于其數(shù)學(xué)原理決定了可以使用緩存信息，而并不是因為它被硬件加速了。

延伸閱讀：

二、顯式提升是什么

合成層的處理是依賴于硬件加速的，但是GPU的存儲空間有限較好不要濫用，過多的合成層有可能還會造成相反的效果，所以瀏覽器只會將滿足下列任意條件的RenderLayer提升為CompositingLayer：