一、transform和opacity動(dòng)畫為什么性能好

opacity動(dòng)畫為什么性能好

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

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

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

transform動(dòng)畫為什么性能好

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

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

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

小結(jié)

opacity和transform動(dòng)畫的高性能是由于其數(shù)學(xué)原理決定了可以使用緩存信息，而并不是因?yàn)樗挥布铀倭恕?/p>

延伸閱讀：

二、顯式提升是什么

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

具有CSS3D屬性或CSS透視效果包含的RenderObject節(jié)點(diǎn)表示的是使用硬件加速的視頻解碼技術(shù)的HTML5video元素包含的RenderObject節(jié)點(diǎn)包含使用了硬件加速的Canvas2D或WebGL技術(shù)使用了CSS透明效果或CSS變形動(dòng)畫使用了硬件加速的CSS Filters技術(shù)（有的文獻(xiàn)中表示filters屬性并沒(méi)有提升為合成層的效果，推測(cè)只有一部分filters濾鏡效果需要使用硬件加速，并非所有）使用了剪裁Clip或者反射Reflection，并且它的后代中包含一個(gè)合成層擁有一個(gè)Z坐標(biāo)比自己小的兄弟節(jié)點(diǎn)，且該節(jié)點(diǎn)是一個(gè)合成層。