快速制作高性能帧动画解决方案

[joeyguo]

原文地址

帧动画中含有大量的图片，通过图片优化、减少图片整体大小，将能够节省资源，提高性能。下面将一一列举优化方式及解决方案。

使用 gka 一键图片优化并生成动画文件

GitHub: https://github.com/gkajs/gka

优化方式

1. 去重 - 展示一样图片的帧，进行图片共用

帧动画中，有些帧使用的图片其实是一模一样的。如果能让这些帧引用同一张图片，不再重复加载展示一样的图片，那将能够减少相同图片的加载。

需要做的工作：

1. 图片去重处理
2. 记录各个帧与去重后的图片的引用关系

2. 空白裁剪 - 裁剪图片四周空白区域

通过裁剪图片四周的空白区域，减少图片的大小。

需要做的工作：

1. 图片四周空白区域裁剪
2. 记录裁剪信息，用于还原图片

3. 合图

为了能够减少 http 请求，减少整体帧图片的大小，可以对图片进行合图处理。

需要做的工作：

1. 图片合图
2. 记录各张图片的合图信息

优化方案组合

空白裁剪 + 去重

空白裁剪与去重强强联合，更加强大的优化。

在帧动画中，有些帧的区别实际上只是图片内容的移动，当对这些图片进行空白裁剪后，会发现裁剪后的图片是一致的，于是可以进行图片复用

空白裁剪+去重将能达到更多场景的图片复用，特别是当存在大量的可以经过裁剪后复用的帧，那么优化的效果非常可观。

空白裁剪 + 去重 + 合图 ✓

基于空白裁剪 + 去重，最终再进行合图优化

小结

通过 空白裁剪 + 去重 + 合图 进行图片优化，能够大大减少图片资源大小。通过最终处理后的图片与图片信息文件后，编写代码还原每帧图片展示，从而进行帧动画播放。

上面一步步的图片处理以及数据信息应该如何实现呢？

gka 一键图片优化并生成动画文件

使用 gka，仅需一行命令，完成下列工作

gka <dir> -t canvas         # dir 为帧图片目录

• 图片空白裁剪
• 图片去重
• 合图处理
• 生成原图信息数据 (用于还原每帧图片)
• 生成帧动画代码

关于 gka 的使用与介绍，请点击 Github地址

Github

https://github.com/gkajs/gka

欢迎使用，欢迎任何意见或建议，谢谢 ：D

[murongqimiao]

thx !

[lily92]

good ，thank you