高性能Web動畫和渲染原理系列（3）——transform和opacity爲何高性能

目錄

• 一. opacity動畫爲何性能好
• 二. transform動畫爲何性能好
• 三.小結

示例代碼託管在：http://www.github.com/dashnowords/blogs

博客園地址：《大史住在大前端》原創博文目錄

華爲雲社區地址：【你要的前端打怪升級指南】

關於opacity和transform的動畫性能的話題，機會老是會涉及到「合成層」或者「硬件加速」的概念，理解起來讓人以爲很是混亂，最近研究渲染相關的知識後，但願將這幾個概念逐步梳理清楚。

一. opacity動畫爲何性能好

opacity單詞意思爲透明度，直觀視覺效果就是顏色變淡了，但最終顯示的顏色其實仍然能夠用RGB三個通道來表示，從數值運算的角度來看，它實際上表示了它採用通常混合策略和其餘顏色進行混合時的比例，也就是：

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

因此opacity這個屬性自己就是用在重疊部分顏色處理的過程當中使用的，對於分層的圖原來講就能夠看做是與圖層內容無關的係數，由於合成過程當中當前層中全部像素都須要經歷上面的顏色混合公式，因此opacity的動畫過程既不會影響佈局，也不須要重繪。這樣圖層中保存的RGB像素數據的緩存在動畫過程當中也就不須要更新了，若是不使用opacity屬性的話，每一幀對於變化部分都須要手動重計算RGB顏色值（這也就至關因而重繪了），由於這些區域的像素顏色一直都在變化，緩存也就沒有意義。如今再來看看opacity的性能優點，就相對容易理解了。

二. transform動畫爲何性能好

transform的性能優點和opacity的緣由是一致的，而不是由於有「硬件加速」的加持。transform屬性支持的位移函數translate( )，縮放比例函數scale( )，斜切函數skew( )和旋轉函數rotate( )均可以轉換爲線性映射的形式，也就是matrix( )表示的方式，簡單來講就是全部transform實現的效果均可以對原座標系中的點[x,y]按照以下的齊次矩陣進行計算獲得變換後的點座標[x',y']：

齊次矩陣的係數是設定transform變換時傳入的，是一個已知項，而使用三維的齊次矩陣是由於二維座標的點在變換時會產生常數項（主要是平移變換），而若是以二維矩陣做爲參數來計算時，以x座標變換爲例，結果的形式就是x'=ax+by，其中是沒有常量的，因此只能採用一個三維齊次矩陣來表示，但計算中的第三個座標實際上並不須要使用。更多的關於變換的數學原理，感興趣的讀者能夠自行查閱資料。

因此transform在動畫過程當中也不須要改變緩存的記錄，而在圖層合成時遍歷當前層的點而後用上述公式來計算出對應的新座標點就能夠了，它也能夠視做一種與圖層內容無關的變換，圖層中的元素首次生成的位圖信息緩存能夠被反覆使用。好比一段平移動畫，若是使用絕對定位+改變left值的方式來實現，就須要不斷計算動畫元素的佈局並更新它的像素信息，但若是使用translate來實現，動畫元素在文檔流中的位置並不須要改變，不管後續平移到多遠，均可以使用位圖緩存中保存的初始位置信息，再加上變換矩陣的影響在層合併時計算出來，一樣既不影響佈局，也不須要重繪，這就是它高性能的緣由。

三.小結

opacity和transform動畫的高性能是因爲其數學原理決定了能夠使用緩存信息，而並非由於它被硬件加速了。