TAT.joeyguo 使用 gka 一键生成帧动画
In 未分类 on 2017年07月09日 by view: 13,996
4

gka

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


gka

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

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

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

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

帧动画

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

preview

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

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

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

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

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

gka 安装

gka 使用

(使用方式有更新,请查看 github README

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. 谢单单 2017 年 10 月 26 日

    总是报错,不知道什么原因

    $ gka -d F:\GKA -p d

    GKA————————————————————
    [dir]: “F:GKA”
    [unique]: true
    [prefix]: “d”

    [template]: “normal”

    { Error: ENOENT: no such file or directory, scandir ‘F:\GKA\GKA’
    at Error (native)
    errno: -4058,
    code: ‘ENOENT’,
    syscall: ‘scandir’,
    path: ‘F:\GKA\GKA’ }

    • TAT.joeyguo

      TAT.joeyguo 2017 年 12 月 13 日

      升级新版本还会出现吗? 会的话麻烦联系我一下 qq 3201590286

  2. jcomey 2017 年 7 月 12 日

    好久没来,人烟稀少!

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

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

发表评论