国内二次元漫画交流组

开源简单的、高效的帧动画生成工具-GKA

只看楼主 收藏 回复
  • - -
楼主
  

gka 是一款简单的、高效的帧动画生成工具,图片处理工具。

只需一行命令,快速图片优化、生成动画文件,支持效果预览。

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

性能佳: 支持相同图片复用✓ 图片空白裁剪✓ 合图优化✓ 图片压缩✓ 图片空白拆分优化✓ 图片像素差优化✓

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

快速开始

安装

npm i gka -g

开始使用

只需一行命令,快速生成动画文件,支持效果预览。

gka E:img # 对 E:img 目录中的图片进行处理

生成新的文件、效果预览

处理前处理后
./img├── gka_1.png├── gka_2.png├── gka_3.png└── ...
./gka-img└── gka.html└── gka.css└── img ├── gka_1.png ├── gka_2.png ├── gka_3.png └── ...

使用教程

gka

一键快速图片优化、生成动画文件。

Command 命令

gka <dir> [options]

Options 参数选项

-d, --dir <string> # 图片文件夹地址-u, --unique [boolean] # 开启相同图片复用优化-c, --crop [boolean] # 开启空白裁剪优化-s, --sprites [boolean] # 开启合图优化-m, --mini [boolean] # 开启图片压缩-p, --prefix [string] # 文件重命名前缀-t, --template <string> # 生成动画文件模板 默认 css ,可选模见 Templates 模板列表-f, --frameduration <number> # 每帧时长,默认 0.04-i, --info [boolean] # 开启输出信息文件-o, --output <string> # 指定生成目录地址-a, --algorithm <string> # 合图布局模式 默认 left-right,可选 binary-tree | top-down ..--bgcolor <string> # 为图片增加背景色,可选,支持格式:'rgb(255,205,44)'、 '#ffcd2c'--count <number> # 生成多合图,指定几张图片合成一张合图,可选--split [boolean] # 开启图片空白拆分优化,与 -t canvas 结合使用--diff [boolean] # 开启图片像素差优化,与 -t canvas 结合使用Templates 模板列表

使用方式

gka 图片目录 -t 模板名

内置的模板列表

  • css

  • 默认模板

  • 输出 css 动画文件

  • 结合 -ucs 支持

    相同帧图片复用

    空白裁剪优化

    合图优化✓ (可选)

  • canvas

  • 输出 canvas 动画文件

  • 结合 -ucs 支持

    相同帧图片复用

    空白裁剪优化

    合图优化✓ (可选)

  • 结合 --diff 支持

    图片像素差优化✓ (可选)

  • 结合 --split 支持

    图片空白拆分优化✓ (可选)

  • svg

  • 输出 svg 动画文件,支持

    自适应缩放雪碧图

  • 结合 -ucs 支持

    相同帧图片复用

    空白裁剪优化

    合图优化✓ (可选)

内置的自定义模板列表

  • percent

  • 输出 css 百分比动画文件

  • 使用该方案支持

    移动端多倍图适配

    自适应缩放雪碧图

  • 结合 -u 支持

    相同帧图片复用✓ (可选)

  • 默认开启

    开启合图优化

  • createjs

  • 输出 createjs 精灵图动画文件

  • 结合 -uc 支持

    相同帧图片复用

    空白裁剪优化✓ (可选)

  • 默认开启

    开启合图优化

  • studiojs

  • 输出 studiojs 动画文件

  • 结合 -uc 支持

    相同帧图片复用

    空白裁剪优化✓ (可选)

  • 默认开启

    开启合图优化

增加模板

模板支持动态增加,只需安装需要的模板。即时安装,即刻可用。

npm i gka-tpl-模板名 -g

使用示例

对 E:img 目录中的图片进行处理。

  1. 快速生成帧动画

gka E:img
  1. 进行图片去重、合图优化,输出 css 动画文件

gka E:img -us
  1. 进行图片去重、空白裁剪、合图优化,使用 canvas 模板,输出 canvas 动画文件

gka E:img -ucs -t canvas

来源丨咱小二


举报 | 1楼 回复