内容简介：© 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 ；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深入理解计算机系统
Randal E.Bryant、David O'Hallaron / 龚奕利、雷迎春 / 中国电力出版社 / 2004-5-1 / 85.00元
从程序员的视角，看计算机系统！ 本书适用于那些想要写出更快、更可靠程序的程序员。通过掌握程序是如何映射到系统上，以及程序是如何执行的，读者能够更好的理解程序的行为为什么是这样的，以及效率低下是如何造成的。粗略来看，计算机系统包括处理器和存储器硬件、编译器、操作系统和网络互连环境。而通过程序员的视角，读者可以清晰地明白学习计算机系统的内部工作原理会对他们今后作为计算机科学研究者和工程师的工作有......一起来看看 《深入理解计算机系统》 这本书的介绍吧!
