高性能Web動畫和渲染原理系列（3）——transform和opacity為什么高性能

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

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

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

高性能Web動畫和渲染原理系列（3）——transform和opacity為什么高性能一. opacity動畫為什么性能好二. transform動畫為什么性能好三.小結

關于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動畫的高性能是由于其數學原理決定了可以使用緩存信息，而并不是因為它被硬件加速了。

渲染 緩存 web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。