不建议使用 CSS3 keyframe transform 实现逐帧动画

栏目: CSS3 · 发布时间: 5年前

内容简介:© Young 2018-12-26 21:43Welcome to My一般在使用 CSS3 keyframe transform 实现逐帧动画时,往往会先把逐帧动画图片合成精灵图,然后再使用 transform 改变其位置,这个方法会消耗大量显存(帧数越多,合成的精灵图越大,显存消耗越多),容易出现闪烁的问题。

© Young 2018-12-26 21:43

Welcome to My GitHub

一般在使用 CSS3 keyframe transform 实现逐帧动画时,往往会先把逐帧动画图片合成精灵图,然后再使用 transform 改变其位置,这个方法会消耗大量显存(帧数越多,合成的精灵图越大,显存消耗越多),容易出现闪烁的问题。

直接看例子:

以下截图都来自于 OPPO FindX Chrome 远程调试。

不建议使用 CSS3 keyframe transform 实现逐帧动画

链接为 https://newbieyoung.github.io/Html_learn/animation/demo1.html

不建议使用 CSS3 keyframe transform 实现逐帧动画

页面中有50个使用 CSS3 keyfrmae 结合 transform 实现的逐帧动画;

为什么会闪烁,大概是因为 transform 会导致浏览器开启硬件加速,每个动画区域都是一个独立的渲染层;

在调试 工具 的 Layers 中可以看到:

不建议使用 CSS3 keyframe transform 实现逐帧动画

另外还要注意每个独立的渲染层并不仅仅只是显示出来的那一小块区域,而是整个逐帧动画精灵图内容区域,这应该就是为什么例子中的逐帧动画会消耗那么多显存的原因了。

不建议使用 CSS3 keyframe transform 实现逐帧动画

当选中 Rendering 中的 FPS meter 就可以看到,总消耗显存 130M 左右。

不建议使用 CSS3 keyframe transform 实现逐帧动画

接着再看 Performance:

不建议使用 CSS3 keyframe transform 实现逐帧动画 不建议使用 CSS3 keyframe transform 实现逐帧动画

可以看到因为渲染层太多,光栅化会消耗较长时间,此时页面空白,较长时间的空白就会造成闪烁。

怎么解决这个问题呢?

Canvas逐帧动画

不建议使用 CSS3 keyframe transform 实现逐帧动画

链接为 https://newbieyoung.github.io/Html_learn/animation/demo2.html

普通的2D Canvas并不是独立的渲染层,渲染区域也仅仅只是显示的那一块区域,并不会消耗太多显存;

不建议使用 CSS3 keyframe transform 实现逐帧动画

不建议使用 CSS3 keyframe transform 实现逐帧动画

不建议使用 CSS3 keyframe transform 实现逐帧动画

最后上述 Canvas逐帧动画是可以再优化一下的;

不建议使用 CSS3 keyframe transform 实现逐帧动画

每次绘制时都是从整个精灵图中选取一部分绘制,这其实是比较耗时的操作;

不建议使用 CSS3 keyframe transform 实现逐帧动画 不建议使用 CSS3 keyframe transform 实现逐帧动画

正确的做法应该在精灵图加载完成之后,先从精灵图中拆出每一帧的图片,然后绘制时直接绘制特定帧的图片即可。

这样优化之后,页面中 Paint 阶段的耗时就可以从 10毫秒 减少为 5 毫秒了。

不建议使用 CSS3 keyframe transform 实现逐帧动画

优化后的链接为 https://newbieyoung.github.io/Html_learn/animation/demo3.html


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序的法理

程序的法理

孙笑侠 / 商务印书馆 / 2005-11 / 21.00元

《程序的法理》基于法律形式化的理念而展开,着眼于程序的法理分析,力图从中国法治的本土特点出发,发掘程序法理论在中国语境下对应的实际问题,是一部学术价值较高的法学著作。一起来看看 《程序的法理》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具