高性能Web动画和渲染原理系列(3)——transform和opacity为什么高性能
2019-10-25 11:22
1811 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/devcloud/article/details/102739651
【摘要】 研究Web高性能动画及原理
示例代码托管在: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动画的高性能是由于其数学原理决定了可以使用缓存信息,而并不是因为它被硬件加速了。
作者:华为云云享专家大史不说话
相关文章推荐
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
- CGI原理解析系列之中的一个----CGI怎样获取WEBserver数据
- web高性能开发系列随笔
- JBoss 系列九十三: 高性能非阻塞 Web 服务器 Undertow
- webpack系列--浅析webpack的原理
- [知识库分享系列] 二、Web(高性能Web站点建设)
- Web框架系列:Session的实现原理
- 追踪app崩溃率、事件响应链、Run Loop、线程和进程、数据表的优化、动画库、Restful架构、SDWebImage的原理
- CGI原理解析系列之三----CGI如何完整获取WEB服务器数据
- [转]Javascript高性能动画与页面渲染
- web高性能开发系列随笔
- Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
- CSS3中动画transform必须要了解的Skew变化原理
- Android实用视图动画及工具系列之九:漂亮的图片选择器,高性能防崩溃图片选择工具
- JavaWEB--POI之EXCEL操作、优化、封装详解系列(一)--概述与原理
- Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform) from http://www.cnblogs.com/beniao/archive/2010/03/21/1685670.html
- Core Animation研究系列 : CGAffineTransformMake(a,b,c,d,tx,ty) 矩阵运算的原理
- 转载和积累系列 - 浏览器渲染原理
- css3动画属性系列之transform细讲scale缩放