简单的、高效的帧动画生成工具
gka
gka 是一款简单的、高效的帧动画生成工具。
通过对图片集进行处理，一键式生成序列帧动画文件，并内置相关优化。
- 一键式 : 图片文件批量序列化重命名，生成 css keyframes，生成帧动画预览文件
- 性能佳 : 支持图片压缩✓，支持
合图模式✓，相同帧图片复用✓ - 多模板 : 内置多种文件输出模板，支持自定义模板
最新更新，请访问 github 地址 https://github.com/joeyguo/gka
帧动画
帧动画是一种常见的动画形式，通过系列图片的连续播放来达到动画效果
使用 css animation 制作帧动画 [人工]
从设计师拿到一组图片文件后，开始下面工作
- 一般需要先修改一下每张图片的文件名
- 计算 keyframes 中的各个百分比及匹配对应的图片
- 当使用合图时，需要计算每一帧的位置数据
- coding..
如果人工去做这些的话，是相当繁琐的。一旦设计师想改一改动画，重新计算将是繁琐＋痛苦..
而这些，使用 gka 一键式生成吧！
gka 安装
|
1 2 |
$ sudo npm install -g gka |
gka 使用
（使用方式有更新，请查看 github README）
gka <options> <files>
|
1 2 3 4 5 6 7 8 9 10 |
-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 -t, --tiny <string> -t 图片文件夹地址 压缩图片 |
gka 示例
生成帧动画 · 普通模式
|
1 2 |
$ gka -d [imageDirPath] -p [prefix] |
1. 示例参数：
- 图片目录：E:\gka-test\img
- 图片名前缀：joe-
2. 命令
|
1 2 |
$ gka -d E:\gka-test\img -p joe- |
3. 结果：
| Before | After | ||||
|---|---|---|---|---|---|
|
|
4. 效果：
生成帧动画 · 合图模式
|
1 2 |
$ gka -d [imageDirPath] -p [prefix] -s true |
1. 示例参数：
- 图片目录：E:\gka-test\img
- 图片名前缀：iori-
- 每帧时长：0.08
2. 命令
|
1 2 |
$ gka -d E:\gka-test\img -p iori- -s true -f 0.08 |
3. 结果：
| Before | After | ||||
|---|---|---|---|---|---|
|
|
4. 效果：
Github
https://github.com/joeyguo/gka
Welcome
- 欢迎 Pull requests、Issues 一般在 24 小时内处理
- 讨论与咨询请+QQ 3201590286 😀
谢单单 2017 年 10 月 26 日
总是报错，不知道什么原因
$ gka -d F:\GKA -p d
GKA————————————————————
[dir]: “F:GKA”
[unique]: true
[prefix]: “d”
[template]: “normal”
{ Error: ENOENT: no such file or directory, scandir ‘F:\GKA\GKA’
at Error (native)
errno: -4058,
code: ‘ENOENT’,
syscall: ‘scandir’,
path: ‘F:\GKA\GKA’ }
TAT.joeyguo 2017 年 12 月 13 日
升级新版本还会出现吗？ 会的话麻烦联系我一下 qq 3201590286
jcomey 2017 年 7 月 12 日
好久没来，人烟稀少！
超级木木 2017 年 7 月 10 日
真心赞！瞬间摆脱手撸逐帧的痛苦啊，666