Web animation and rendering high performance principles Series (3) - transform and opacity Why High Performance

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/devcloud/article/details/102739651

Abstract Research Web animation and high-performance principle

Sample code is hosted: http://www.github.com/dashnowords/blogs

Blog Park address: "the history of living in the big front-end" original blog directory

On opacityand transformthe topic of animation performance, opportunities will always be related to the "synthetic layer" or "hardware acceleration" after the concept, to understand people feel very confusing, rendering knowledge related to recent studies, hoping to gradually sort out these few concepts clear.

A. Opacity animation Why good performance

opacityWord meaning transparency, intuitive visual effect is lighter in color, but the color of the final show of the fact you can still use RGB three channels are represented, from the point of view of numerical computation, it actually represents its hybrid strategy and other general uses the proportion of mixed colors when , that is:

For example, on the page, the default white background rgba(255,255,255)display comprises a transparent rgba(218,89,97,0.8)color, then the color of the RGB components are performed according to the above formula is obtained rgb(225,122,128), at the pickup point rendered with color picker, and the results are consistent with the above theory:

所以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来实现，动画元素在文档流中的位置并不需要改变，无论后续平移到多远，都可以使用位图缓存中保存的初始位置信息，再加上变换矩阵的影响在层合并时计算出来，同样既不影响布局，也不需要重绘，这就是它高性能的原因。