css逐帧动画图片太大怎么办 不建议使用 CSS3 keyframe transform 实现逐帧动画

© Young -12-26 21:43

Welcome to My GitHub

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

直接看例子：

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

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

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

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

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

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

接着再看 Performance：

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

怎么解决这个问题呢？

Canvas逐帧动画

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

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

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

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

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