之前想找一个比较方便做雪碧图动画的工具，来自动化处理图片，这样对于我们很方便。

GKA 是一款简单的、高效的帧> 动画生成工具，图片处理工具。
只需一行命令，快速图片优化、生成动画文件，支持效果预览。

这个工具使用起来也是非常简单的，里面有很多功能和几套模板，一行命令就解放了双手。

1

gka E:\img  # 对 E:\img 目录中的图片进行处理

1
2
3
4
5
6

处理前
./img
├── gka_1.png
├── gka_2.png
├── gka_3.png
└── ...

1
2
3
4
5
6
7
8
9

处理后
./gka-img
└── gka.html
└── gka.css
└── img
    ├── gka_1.png
    ├── gka_2.png
    ├── gka_3.png
    └── ...

Templates 模板列表

使用方式

1

gka 图片目录 -t 模板名

内置的模板列表

• css
  • 默认模板
  • 输出 css 动画文件
  • 结合 -ucs 支持 相同帧图片复用✓ 空白裁剪优化✓ 合图优化✓ (可选)

• canvas

  • 输出 canvas 动画文件
  • 结合 -ucs 支持 相同帧图片复用✓ 空白裁剪优化✓ 合图优化✓ (可选)
  • 结合 –diff 支持 图片像素差优化✓ (可选)
  • 结合 –split 支持 图片空白拆分优化✓ (可选)

• svg

  • 输出 svg 动画文件，支持 自适应缩放雪碧图✓
  • 结合 -ucs 支持 相同帧图片复用✓ 空白裁剪优化✓ 合图优化✓ (可选)

使用示例

对 E:\img 目录中的图片进行处理。

1
2
3

快速生成帧动画

gka E:\img

1
2
3

进行图片去重、合图优化，输出 css 动画文件

gka E:\img -us

1
2
3

进行图片去重、空白裁剪、合图优化，使用 canvas 模板，输出 canvas 动画文件

gka E:\img -ucs -t canvas