Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gkajs/gka
一款高效、高性能的帧动画生成工具
https://github.com/gkajs/gka
Last synced: 3 months ago
JSON representation
一款高效、高性能的帧动画生成工具
- Host: GitHub
- URL: https://github.com/gkajs/gka
- Owner: gkajs
- License: mit
- Created: 2017-01-03T07:44:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-07T15:08:59.000Z (7 months ago)
- Last Synced: 2024-03-18T23:22:06.305Z (3 months ago)
- Language: JavaScript
- Homepage: https://gka.js.org
- Size: 1.32 MB
- Stars: 2,019
- Watchers: 55
- Forks: 218
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-github-star - gka
- awesome - gkajs/gka - 一款高效、高性能的帧动画生成工具 (JavaScript)
- awesome-bookmarks - **gka**
README
简单的、高效的帧动画生成工具
---
# GKA
[gka](https://github.com/joeyguo/gka) 是一款简单的、高效的帧动画生成工具，图片处理工具。
只需一行命令，快速图片优化、生成动画文件，支持效果预览。
* **一键式:** 图片文件批量序列化重命名，生成帧动画文件，支持预览
* **性能佳:** 支持`相同图片复用`✓ `图片空白裁剪`✓ `合图优化`✓ `图片压缩`✓ `图片空白拆分优化`✓ `图片像素差优化`✓ `多倍图适配`✓
* **多模板:** 内置多种文件输出模板，支持自定义模板
在线官方文档：[https://gka.js.org](https://gka.js.org)
# 快速开始
## 安装
```bash
sudo npm install -g gka --unsafe-perm=true --allow-root
```
注：安装时如出现权限问题，可先查看此[issues](https://github.com/gkajs/gka/issues/23)
## 开始使用
只需一行命令，快速生成动画文件，支持效果预览。
```bash
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 命令
```bash
gka [options]
```
### Options 参数选项
```
-d, --dir # 图片文件夹地址
-u, --unique [boolean] # 开启相同图片复用优化
-c, --crop [boolean] # 开启空白裁剪优化
-s, --sprites [boolean] # 开启合图优化
-m, --mini [boolean] # 开启图片压缩
-p, --prefix [string] # 文件重命名前缀
-t, --template # 生成动画文件模板 默认 css ，可选模见 Templates 模板列表
-f, --frameduration # 每帧时长，默认 0.04
-i, --info [boolean] # 开启输出信息文件
-o, --output # 指定生成目录地址
-a, --algorithm # 合图布局模式 默认 left-right，可选 binary-tree | top-down ..
--bgcolor # 为图片增加背景色，可选，支持格式：'rgb(255,205,44)'、 '#ffcd2c'
--count # 生成多合图，指定几张图片合成一张合图，可选
--ratio # 生成指定的N倍图动画，如 --ratio 2 支持retina屏幕的2倍图动画， 可选
--split [boolean] # 开启图片空白拆分优化，与 -t canvas 结合使用
--diff [boolean] # 开启图片像素差优化，与 -t canvas 结合使用
--minirate [string] # 自定义压缩比率，格式: min-max，与 -m 结合使用
```
### Templates 模板列表
使用方式
```bash
gka 图片目录 -t 模板名
```
#### 内置的模板列表
- css
- 默认模板
- 输出 css 动画文件
- 结合 -ucs 支持 `相同帧图片复用`✓ `空白裁剪优化`✓ `合图优化`✓ (可选)
- canvas
- 输出 canvas 动画文件
- 结合 -ucs 支持 `相同帧图片复用`✓ `空白裁剪优化`✓ `合图优化`✓ (可选)
- 结合 --diff 支持 `图片像素差优化`✓ (可选)
- 结合 --split 支持 `图片空白拆分优化`✓ (可选)
- svg
- 输出 svg 动画文件，支持 `自适应缩放雪碧图`✓
- 结合 -ucs 支持 `相同帧图片复用`✓ `空白裁剪优化`✓ `合图优化`✓ (可选)
- wechat-svg
- 输出微信公众号文章所支持的 svg 序列帧片段
- 结合 -us 支持 `相同帧图片复用`✓ `合图优化`✓ (可选)
#### 内置的自定义模板列表
- percent
- 输出 css 百分比动画文件
- 使用该方案支持 `移动端多倍图适配`✓ `自适应缩放雪碧图`✓
- 结合 -u 支持 `相同帧图片复用`✓ (可选)
- 默认开启 `开启合图优化`✓
- [Github 地址](https://github.com/gkajs/gka-tpl-percent)
- createjs
- 输出 createjs 精灵图动画文件
- 结合 -uc 支持 `相同帧图片复用`✓ `空白裁剪优化`✓ (可选)
- 默认开启 `开启合图优化`✓
- [Github 地址](https://github.com/gkajs/gka-tpl-createjs)
- studiojs
- 输出 studiojs 动画文件
- 结合 -uc 支持 `相同帧图片复用`✓ `空白裁剪优化`✓ (可选)
- 默认开启 `开启合图优化`✓
- [Github 地址](https://github.com/gkajs/gka-tpl-studiojs)
#### 增加模板
模板支持动态增加，只需安装需要的模板。即时安装，即刻可用。
```bash
npm i gka-tpl-模板名 -g
```
### 使用示例
对 E:\img 目录中的图片进行处理。
1. 快速生成帧动画
```bash
gka E:\img
```
2. 进行图片去重、合图优化，输出 css 动画文件
```bash
gka E:\img -us
```
3. 进行图片去重、空白裁剪、合图优化，使用 canvas 模板，输出 canvas 动画文件
```bash
gka E:\img -ucs -t canvas
```
# 定制化
## 开发模板 TODO
#### 命名规范
#### 开发流程
#### 发布模版
#### 使用模板
# Welcome
* 欢迎 Pull requests、Issues 一般在24小时内处理
* 讨论与咨询请+QQ 3201590286 :D
# License
[MIT](./LICENSE)
Copyright (c) 2017 - present, joeyguo