Nanoseconds Produce Minutes
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    gkapublic

    gka

    gka

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


    GKA

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

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

    • 一键式: 图片文件批量序列化重命名,生成帧动画文件,支持预览
    • 性能佳: 支持相同图片复用图片空白裁剪合图优化图片压缩图片空白拆分优化图片像素差优化多倍图适配
    • 多模板: 内置多种文件输出模板,支持自定义模板

    在线官方文档:https://gka.js.org

    gka-show

    快速开始

    安装

    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
        └── ...
    

    rockit

    使用教程

    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>              #  生成多合图,指定几张图片合成一张合图,可选
    
    --ratio <number>              #  生成指定的N倍图动画,如 --ratio 2 支持retina屏幕的2倍图动画, 可选
    
    --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 支持 相同帧图片复用✓ (可选)
      • 默认开启 开启合图优化
      • Github 地址
    • createjs

      • 输出 createjs 精灵图动画文件
      • 结合 -uc 支持 相同帧图片复用空白裁剪优化✓ (可选)
      • 默认开启 开启合图优化
      • Github 地址
    • studiojs

      • 输出 studiojs 动画文件
      • 结合 -uc 支持 相同帧图片复用空白裁剪优化✓ (可选)
      • 默认开启 开启合图优化
      • Github 地址

    增加模板

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

    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

    定制化

    开发模板 TODO

    命名规范

    开发流程

    发布模版

    使用模板

    Welcome

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

    License

    MIT

    Copyright (c) 2017 - present, joeyguo

    install

    npm i gka

    Downloadsweekly downloads

    149

    version

    2.8.4

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar