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

gka

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

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

• 一键式 : 图片文件批量序列化重命名，生成 css keyframes，生成帧动画预览文件

• 性能佳 : 支持图片压缩✓，支持合图模式✓，相同帧图片复用✓

• 多模板 : 内置多种文件输出模板，支持自定义模板

最新更新，请访问 github 地址 https://github.com/joeyguo/gka

帧动画

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

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

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

1. 一般需要先修改一下每张图片的文件名

2. 计算 keyframes 中的各个百分比及匹配对应的图片

3. 当使用合图时，需要计算每一帧的位置数据

4. coding..

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

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

gka 安装

$sudo npm install-ggka
 

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
 
-t,--tiny<string>        -t图片文件夹地址压缩图片
 

gka 示例

生成帧动画 · 普通模式

$gka-d[imageDirPath]-p[prefix]
 

1.示例参数：

• 图片目录：E:\gka-test\img

• 图片名前缀：joe-

2.命令

$gka-d E:\gka-test\img-pjoe-
 

3.结果：

 
./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-d[imageDirPath]-p[prefix]-strue
 

1.示例参数：

• 图片目录：E:\gka-test\img

• 图片名前缀：iori-

• 每帧时长：0.08

2.命令

$gka-d E:\gka-test\img-piori--strue-f0.08
 

3.结果：

 
./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