TAT.joeyguo 快速制作高性能帧动画解决方案
In Web开发 on 2017年08月08日 by view: 2,230
0

原文地址

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

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

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

优化方式

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

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

需要做的工作:

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

unique

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

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

需要做的工作:

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

crop

3. 合图

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

需要做的工作:

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

sprites

优化方案组合

空白裁剪 + 去重

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

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

crop-unique

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

空白裁剪 + 去重 + 合图 ✓

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

all

小结

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

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

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

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

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

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

Github

https://github.com/gkajs/gka

欢迎使用,欢迎任何意见或建议,谢谢 :D

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/08/gka3/

发表评论