内容简介：© 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 远程调试。
链接为 https://newbieyoung.github.io/Html_learn/animation/demo1.html ；
页面中有50个使用 CSS3 keyfrmae 结合 transform 实现的逐帧动画；
为什么会闪烁，大概是因为 transform 会导致浏览器开启硬件加速，每个动画区域都是一个独立的渲染层；
在调试 工具 的 Layers 中可以看到：
另外还要注意每个独立的渲染层并不仅仅只是显示出来的那一小块区域，而是整个逐帧动画精灵图内容区域，这应该就是为什么例子中的逐帧动画会消耗那么多显存的原因了。
当选中 Rendering 中的 FPS meter 就可以看到，总消耗显存 130M 左右。
接着再看 Performance：
可以看到因为渲染层太多，光栅化会消耗较长时间，此时页面空白，较长时间的空白就会造成闪烁。
怎么解决这个问题呢？
Canvas逐帧动画
链接为 https://newbieyoung.github.io/Html_learn/animation/demo2.html ；
普通的2D Canvas并不是独立的渲染层，渲染区域也仅仅只是显示的那一块区域，并不会消耗太多显存；
最后上述 Canvas逐帧动画是可以再优化一下的；
每次绘制时都是从整个精灵图中选取一部分绘制，这其实是比较耗时的操作；
正确的做法应该在精灵图加载完成之后，先从精灵图中拆出每一帧的图片，然后绘制时直接绘制特定帧的图片即可。
这样优化之后，页面中 Paint 阶段的耗时就可以从 10毫秒 减少为 5 毫秒了。
优化后的链接为 https://newbieyoung.github.io/Html_learn/animation/demo3.html ；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
