gka 是一款简单的、高效的帧动画生成工具,图片处理工具。
只需一行命令,快速图片优化、生成动画文件,支持效果预览。
- 一键式: 图片文件批量序列化重命名,生成帧动画文件,支持预览
- 性能佳: 支持
相同图片复用
✓图片空白裁剪
✓合图优化
✓图片压缩
✓图片空白拆分优化
✓图片像素差优化
✓多倍图适配
✓ - 多模板: 内置多种文件输出模板,支持自定义模板
在线官方文档:gka.js.org
快速开始
安装
npm i gka -g
开始使用
只需一行命令,快速生成动画文件,支持效果预览。
gka E:\img # 对 E:\img 目录中的图片进行处理
官方文档
使用示例与优化原理
帧动画中含有大量的图片,通过图片优化、减少图片整体大小,将能够节省资源,提高性能。gka 提供多种优化方式,并支持组合使用。
举例:
使用 gka,仅需一行命令:
gka <dir> -cus # dir 为帧图片目录
即可完成下列工作:
- 图片空白裁剪 -c
- 图片去重 -u
- 合图处理 -s
- 生成帧动画代码
- 预览动画播放
优化原理
1. 空白裁剪 - 裁剪图片四周空白区域
通过裁剪图片四周的空白区域,减少图片的大小。
需要做的工作:
a.图片四周空白区域裁剪
b.记录裁剪信息,用于还原图片
2.去重 - 展示一样图片的帧,进行图片共用
帧动画中,有些帧使用的图片其实是一模一样的。如果能让这些帧引用同一张图片,不再重复加载展示一样的图片,那将能够减少相同图片的加载。
需要做的工作:
a.图片去重处理
b.记录各个帧与去重后的图片的引用关系
3. 合图
为了能够减少 http 请求,减少整体帧图片的大小,可以对图片进行合图处理。
需要做的工作:
a.图片合图
b.记录各张图片的合图信息
(组合)空白裁剪 + 去重 + 合图 ✓
在帧动画中,有些帧的区别实际上只是图片内容的移动,当对这些图片进行空白裁剪后,会发现裁剪后的图片是一致的。于是可以先对图片空白裁剪,再进行图片去重,最终进行合图处理,优化效果非常可观。
通过 空白裁剪 + 去重 + 合图 进行图片优化,能够大大减少图片资源大小。通过最终处理后的图片与图片信息文件后,gka 将会自动生成对应代码,还原每帧图片展示,进行动画播放。
我还有不少关于 gka 的文章:
- 快速制作多倍图帧动画方式及原理:gka[—ratio]
- 多个动画间存在部分相同动画的优化方案:gka
- 使用 gka 一键生成帧动画
- 与设计姐的图片二三事
- 一键制作自适应等比缩放的雪碧图动画
- 快速制作高性能帧动画解决方案
- 使用 gka 加速 createjs 动画开发及图片优化
欢迎使用,欢迎任何意见或建议,谢谢 :D