TAT.joeyguo 使用 gka 一键生成帧动画
In Web开发,资源工具 on 2017年07月09日 by view: 2,801
2

gka

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


gka

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

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

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

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

帧动画

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

preview

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

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

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

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

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

gka 安装

gka 使用

gka <options> <files>

gka 示例

生成帧动画 · 普通模式

1.示例参数:

  • 图片目录:E:\gka-test\img
  • 图片名前缀:joe-

2.命令

3.结果:

Before After

4.效果:

joe

在线地址

生成帧动画 · 合图模式

1.示例参数:

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

2.命令

3.结果:

Before After

4.效果:

iori

在线地址

Github

https://github.com/joeyguo/gka

Welcome

  • 欢迎 Pull requests、Issues 一般在24小时内处理
  • 讨论与咨询请+QQ 3201590286 😀

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2017/07/gka/

  1. jcomey 2017 年 7 月 12 日

    好久没来,人烟稀少!

  2. 超级木木 2017 年 7 月 10 日

    真心赞!瞬间摆脱手撸逐帧的痛苦啊,666

发表评论