优化 CSS3 动画性能

优化 CSS3 动画性能

Chris Yue 2 comments
Posts

最近的一个项目是关于智能电视上的 HTML5 网页,此项目包含了许多 CSS3 的动画。受局限于智能电视的计算性能和显示性能,很多在桌面平台上不需要注意的细节,必须得考虑。

之前遇到一个问题:使用 CSS3 的动画功能控制屏幕的滚动在电视或者电视盒子上测试总是幻灯片效果,根本谈不上动画。毫无头绪也只好上网 google。幸运的是在一个逗逼(adobe,读作 A-Dou-Bi)的网站上,找到了一篇相当靠谱的文章。通过这篇文章的点拨,优化效果还真是极其明显。

原文大概的意思是说:CSS3 的像素控制(比如 width, height, top, left 等属性)需要不断将主线程重新运算重新布局之后的 bitmap 信息传给显存。此种使用情况跟之前传统的用 JS 去控制像素的方式来实现动画其实比较类似,就算是使用了 transition 或者 animate,也难免会出现卡顿的情况。但 CSS3 的 transform是直接通过GPU来实现图形变化,所以如果 transition 是通过 transform 来实现动画,就会跳过反复传递 bitmap 信息给显存的步骤,而达到极大优化动画效果的结果!

下面我写了两个 div,鼠标移动上去或者手指按住不放都可以实现宽度的放大。其中一个是用 transition: width 来实现,另外一个使用的是 transition: transform 来实现。当然可能在一些性能极其好的桌面机上,看不出太多差别来,但在手机上或者智能电视/电视盒子上还是能看出比较明显区别的

另外,除了 transform,文章还提到了以下几个适合做动画的属性:opacity 和 filter。

优化 CSS3 动画性能 by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

微信赞赏码

文章不错,我要帮站长分担建站费!
天使投赏人

2 Comments

老龙

一月 18, 2016 在 5:12 下午

不知兄台用css3实现的效果如何了?我也面临这样的问题。在低端机顶盒上APP的动画性能太差,目前正在尝试用canvas来代替css3用虚拟dom的方式来实现。但是不如css3来的方便。如有兴趣交流请加我Q260285259

    Chris Yue

    一月 22, 2016 在 6:13 下午

    原文中已经说了解决方案了

     

发表评论

− 5 = three