JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q78146F
  • License MIT

Generate Keyframes Animation

Package Exports

  • gka

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gka) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Generate Keyframes Animation

gka

NPM version license

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

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

  • 一键式 : 图片文件批量序列化重命名，生成 css keyframes，生成帧动画预览文件
  • 性能佳 : 支持图片压缩✓，支持合图模式✓，相同帧图片复用✓

preview

Install

$ sudo npm install -g gka

Usage

gka <options> <files>

-d, --dir <string>            -d  图片文件夹地址
-p, --prefix <string>         -p  重命名前缀
-s, --sprites <boolean>       -s  true 开启合图模式
-f, --frameduration <number>  -f  每帧时长 默认为 0.04

-t, --tiny <string>           -t 图片文件夹地址 压缩图片
# 帧动画生成 - 普通模式

$ gka -d [imageFolderPath] -p [prefix] 
# 帧动画生成 - 合图模式

$ gka -d [imageFolderPath] -p [prefix] -s true
# 压缩图片

$ gka -t [imageFolderPath]

Examples

生成帧动画 · 普通模式

1.示例参数：

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

2.命令

# gka -d [imageFolderPath] -p [prefix] 

$ gka -d E:\gka-test\img -p prefix

3.结果：

BeforeAfter
 

./img
├── 害羞_00000.png
├── 害羞_00001.png
├── 害羞_00002.png
├── 害羞_00003.png
├── 害羞_00004.png
└── ...


./img-gka
└── gka.html
└── gka.css
└── img
    ├── prefix001.png
    ├── prefix002.png
    ├── prefix003.png
    ├── prefix004.png
    └── ...

生成帧动画 · 合图模式

1.示例参数：

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

2.命令

# gka -d [imageFolderPath] -p [prefix] -s true

$ gka -d E:\gka-test\img -p prefix -s true

3.结果：

BeforeAfter
 

./img
├── 害羞_00000.png
├── 害羞_00001.png
├── 害羞_00002.png
├── 害羞_00003.png
├── 害羞_00004.png
└── ...


./img-gka-sprites
└── gka.html
└── gka.css
└── prefix-sprites.png

图片压缩

1.示例参数：

  • 图片目录：E:\gka-test\img

2.命令

# gka -t [imageFolderPath]

$ gka -t E:\gka-test\img

License

MIT

Log

  • v1.0.x 重命名图片文件、 生成 keyframe animation css 动画、自动化合图、自动化图片压缩、效果预览
  • v1.1.0 相同帧图片复用