您现在的位置：首页 --> 其他 --> 使用 gka 一键生成帧动画

使用 gka 一键生成帧动画

浏览:1212次出处信息

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

gka

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

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

一键式 : 图片文件批量序列化重命名，生成 css keyframes，生成帧动画预览文件
性能佳 : 支持图片压缩✓，支持合图模式✓，相同帧图片复用✓
多模板 : 内置多种文件输出模板，支持自定义模板

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

帧动画

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

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

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

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

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

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

gka 安装

1
2
$sudo npm install-ggka
 

gka 使用

`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-pjoe-
 

3.结果：

Before

After

1
2
3
4
5
6
7
8
9
 
./img
├──00.png
├──01.png
├──02.png
├──03.png
├──04.png
└──...
 

1
2
3
4
5
6
7
8
9
10
11
 
./img-gka
└──gka.html
└──joe-gka.css
└──img
    ├──joe-1.png
    ├──joe-2.png
    ├──joe-3.png
    ├──joe-4.png
    └──...
 

4.效果：

在线地址

生成帧动画 · `合图模式`

1
2
$gka-d[imageDirPath]-p[prefix]-strue
 

1.示例参数：

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

2.命令

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

3.结果：

Before

After

1
2
3
4
5
6
7
8
9
 
./img
├──00.png
├──01.png
├──02.png
├──03.png
├──04.png
└──...
 

1
2
3
4
5
6
7
./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

建议继续学习：
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：自动人脸识别基本原理

后一篇：sproxy开发体验 >>

文章信息

作者：TAT.joeyguo 来源： AlloyTeam
标签： gka 动画
发布时间：2017-10-15 09:30:36

建议继续学习

近3天十大热文

IT技术博客大学习