New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
joeyguo opened this Issue Aug 6, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@joeyguo
Owner

joeyguo commented Aug 6, 2017

原文地址

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

使用 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 <dir> -t canvas         # dir 为帧图片目录
  • 图片空白裁剪
  • 图片去重
  • 合图处理
  • 生成原图信息数据 (用于还原每帧图片)
  • 生成帧动画代码

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

Github

https://github.com/gkajs/gka

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

@murongqimiao

This comment has been minimized.

Show comment
Hide comment
@murongqimiao

murongqimiao commented Aug 13, 2017

thx !

@lily92

This comment has been minimized.

Show comment
Hide comment
@lily92

lily92 Dec 7, 2017

good ,thank you

lily92 commented Dec 7, 2017

good ,thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment