使用 gka 一键生成帧动画

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

gka

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

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

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

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

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

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

帧动画

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

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

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

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

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

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

  4. coding..

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

而这些,使用 gka 一键式生成吧!

gka 安装

$ sudo npm install -g gka

gka 使用

gka

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

-s, --sprites        -s  是否开启合图模式 默认 false
-a, --algorithm       -a  合图布局模式 默认 binary-tree

-t, --tiny         -t 图片文件夹地址 压缩图片

gka 示例

生成帧动画 · 普通模式

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

1.示例参数:

  • 图片目录:E:gka-testimg

  • 图片名前缀:joe-

2.命令

$ gka -d E:gka-testimg -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 -d [imageDirPath] -p [prefix] -s true

1.示例参数:

  • 图片目录:E:gka-testimg

  • 图片名前缀:iori-

  • 每帧时长:0.08

2.命令

$ gka -d E:gka-testimg -p iori- -s true -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

IT技术博客大学习稿源:IT技术博客大学习 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 使用 gka 一键生成帧动画

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录