黑马程序员技术交流社区
标题: 【深圳前端】快速制作高性能帧动画解决方案 [打印本页]
作者: 柠檬leung不酸 时间: 2019-1-20 10:00
标题: 【深圳前端】快速制作高性能帧动画解决方案
帧动画中含有大量的图片，通过图片优化、减少图片整体大小，将能够节省资源，提高性能。下面将一一列举优化方式及解决方案。
优化方式1. 去重 - 展示一样图片的帧，进行图片共用帧动画中，有些帧使用的图片其实是一模一样的。如果能让这些帧引用同一张图片，不再重复加载展示一样的图片，那将能够减少相同图片的加载。
需要做的工作：
2. 空白裁剪 - 裁剪图片四周空白区域通过裁剪图片四周的空白区域，减少图片的大小。
需要做的工作：
3. 合图为了能够减少 http 请求，减少整体帧图片的大小，可以对图片进行合图处理。
需要做的工作：
优化方案组合空白裁剪 + 去重空白裁剪与去重强强联合，更加强大的优化。
在帧动画中，有些帧的区别实际上只是图片内容的移动，当对这些图片进行空白裁剪后，会发现裁剪后的图片是一致的，于是可以进行图片复用
空白裁剪+去重将能达到更多场景的图片复用，特别是当存在大量的可以经过裁剪后复用的帧，那么优化的效果非常可观。
空白裁剪 + 去重 + 合图 ✓基于空白裁剪 + 去重，最终再进行合图优化
小结通过 空白裁剪 + 去重 + 合图 进行图片优化，能够大大减少图片资源大小。通过最终处理后的图片与图片信息文件后，编写代码还原每帧图片展示，从而进行帧动画播放。
上面一步步的图片处理以及数据信息应该如何实现呢？
gka 一键图片优化并生成动画文件gka <dir> -t canvas # dir 为帧图片目录
- 图片空白裁剪
- 图片去重
- 合图处理
- 生成原图信息数据 (用于还原每帧图片)
- 生成帧动画代码
Github文章仅作为分享
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
