简单的、高效的帧动画生成工具
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 |
|---|---|
|
|