使用 gka 一键生成帧动画

简单的、高效的帧动画生成工具

---

gka

gka 是一款简单的、高效的帧动画生成工具。

通过对图片集进行处理，一键式生成序列帧动画文件，并内置相关优化。

• 一键式 : 图片文件批量序列化重命名，生成 css keyframes，生成帧动画预览文件
• 性能佳 : 支持图片压缩✓，支持合图模式✓，相同帧图片复用✓

github 地址 https://github.com/joeyguo/gka

帧动画

帧动画是一种常见的动画形式，通过系列图片的连续播放来达到动画效果

使用 css animation 制作帧动画[人工]

从设计师拿到一组图片文件后，开始下面工作

1. 一般需要先修改一下每张图片的文件名
2. 计算 keyframes 中的各个百分比及匹配对应的图片
3. 当使用合图时，需要计算每一帧的位置数据
4. coding..

如果人工去做这些的话，是相当繁琐的。一旦设计师想改一改动画，重新计算将是繁琐＋痛苦..

而这些，使用 gka 一键式生成吧！

gka 安装

$ npm i -g gka

gka 使用

注：最新API文档见 gka

gka <options> <files>

-d, --dir <string>            -d  图片文件夹地址
-p, --prefix <string>         -p  重命名前缀
-f, --frameduration <number>  -f  每帧时长 默认为 0.04
-i, --info [boolean]          -i  是否输出信息文件 默认 false

-s, --sprites [boolean]       -s  是否开启合图模式 默认 false
-a, --algorithm <string>      -a  合图布局模式 默认 binary-tree

-m, --mini [boolean]           -t 图片文件夹地址 压缩图片

gka 示例

生成帧动画 · 普通模式

$ gka [imageDirPath] -p [prefix] 

1.示例参数：

• 图片目录：E:\gka-test\img
• 图片名前缀：joe-

2.命令

$ gka E:\gka-test\img -p joe-

3.结果：

Before	After
./img ├── 00.png ├── 01.png ├── 02.png ├── 03.png ├── 04.png └── ...	./img-gka └── gka.html └── joe-gka.css └── img ├── joe-1.png ├── joe-2.png ├── joe-3.png ├── joe-4.png └── ...

4.效果：

在线地址

生成帧动画 · 合图模式

$ gka [imageDirPath] -p [prefix] -s true

1.示例参数：

• 图片目录：E:\gka-test\img
• 图片名前缀：iori-
• 每帧时长：0.08

2.命令

$ gka -d E:\gka-test\img -p iori- -s -f 0.08 

3.结果：

Before	After
./img ├── 00.png ├── 01.png ├── 02.png ├── 03.png ├── 04.png └── ...	./img-gka-sprites └── img └── iori-sprites.png └── gka.html └── iori-gka.css

4.效果：

在线地址

Github

https://github.com/joeyguo/gka

Welcome

• 欢迎 Pull requests、Issues 一般在24小时内处理
• 讨论与咨询请+QQ 3201590286 :D