Giter Club home page Giter Club logo

gka's Introduction

gka

gka

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


GKA

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

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

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

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

gka-show

快速开始

安装

sudo npm install -g gka --unsafe-perm=true --allow-root

注:安装时如出现权限问题,可先查看此issues

开始使用

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

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 结合使用

--minirate [string]           #  自定义压缩比率,格式: min-max,与 -m 结合使用

Templates 模板列表

使用方式

gka 图片目录 -t 模板名

内置的模板列表

  • css

    • 默认模板
    • 输出 css 动画文件
    • 结合 -ucs 支持 相同帧图片复用空白裁剪优化合图优化✓ (可选) 
  • canvas

    • 输出 canvas 动画文件
    • 结合 -ucs 支持 相同帧图片复用空白裁剪优化合图优化✓ (可选) 
    • 结合 --diff 支持 图片像素差优化✓ (可选) 
    • 结合 --split 支持 图片空白拆分优化✓ (可选) 
  • svg

    • 输出 svg 动画文件,支持 自适应缩放雪碧图
    • 结合 -ucs 支持 相同帧图片复用空白裁剪优化合图优化✓ (可选) 
  • wechat-svg

    • 输出微信公众号文章所支持的 svg 序列帧片段
    • 结合 -us 支持 相同帧图片复用合图优化✓ (可选) 

内置的自定义模板列表

  • 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

gka's People

Contributors

joeygoo avatar joeyguo avatar lee1994522 avatar rafong973 avatar sunxiuguo avatar tofrankie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gka's Issues

使用样例图片输出svg,比例失真

我在使用样例的一序列图片输出svg时, 打开看到动画失真
svg:
image
这个是css输出:
image
还有另一个问题 默认的svg模板 是输出svg文件出来吗?如果是的话 为什么在使用svg模板输出没有svg文件?
image

可以支持放出接口

现在是一个命令行工具,如果想在项目中用呢?比如希望有如下操作:

const gka = require('gka');

...

在使用图片压缩的时候报错的了

我在使用图片压缩的时候报错如下:

C:\WINDOWS\system32>gka -t C:\Users\xxx\Pictures\tinified
gka version:1.4.6

  • optimizing image..
    dir: C:\Users\xxx\Pictures\tinified
    [ 'C:\Users\xxx\Pictures\tinified' ]
    (node:11740) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 44): Error: Error in file: C:/Users/xxx/Pictures/tinified/0002.png
    ϵͳ�Ҳ���ָ����·����
    (node:11740) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

node版本为V8.1.3,请问这个是我使用错了么?

是不是mac环境下用不了?

image
image
如图,在生成的gka-icon-u-normal文件夹或gka-icon-u-canvas里,只有img文件夹,没有其他文件。
使用命令:
$gka ./icon -t

生成多张合并图片

我有个需求,有260张连续图片,希望生成多张4*3的合并图。
目前,如果使用-s合并,只能生成一张270M的图片,没法使用

图片首次闪烁

gka E:\img指令看生成的代码虽然有做图片预加载,但是在css里面animatio引用还是直接引用的本地的,和没有预处理差不多

install warn

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
/usr/local/bin/gka -> /usr/local/lib/node_modules/gka/bin/gka.js

合成的图片过大

我有156张图片, 每张图片大小50kb,生成的图片100多m,使用的是 -u canvas ,应如何优化

生成合图时遇到异常情况没有抛出实际的错误,导致无法排查问题

举个例子,当 png 图片的签名非法时,合图出错,但没有抛出实际的错误,继续执行 writeFileSync 的逻辑,最终抛出了 TypeError: Cannot read property 'image' of undefined 的异常,无法获悉具体的错误情况

目前的报错:

            fs.writeFileSync(filepath, r.image);
                                         ^
TypeError: Cannot read property 'image' of undefined
    at /Users/neal/Workspace/xxx/node_modules/[email protected]@gka/lib/plugins/ImageSpritesPlugin.js:24:42
    at /Users/neal/Workspace/xxx/node_modules/[email protected]@mkdirp/index.js:30:20
    at FSReqCallback.oncomplete (fs.js:148:20)

实际的错误为:

Error: Invalid file signature
    at module.exports.Parser._parseSignature (/Users/neal/Workspace/xxx/node_modules/[email protected]@pngjs/lib/parser.js:50:18)
    ...

一种解决方案:

// 在合图异常时,直接抛出 error
// ImageSpritePlugin.js:23
function gsprites(srcs, filepath, algorithm, callback) {
    Spritesmith.run({
        src: srcs,
        algorithm: algorithm,
        algorithmOpts: {sort: false},
    }, function(err, r) {
        if (err) throw err;
        mkdirp(path.dirname(filepath), function (err) {
            fs.writeFileSync(filepath, r.image);
            // console.log('[-] ' + path.basename(filepath) +' generated');
            callback && callback(r, filepath);
        });
    });
}

能规定固定尺寸或者选择以最大图为尺寸吗

我想要的是这样的:

现在素材是这样的:

如果能固定一个每帧尺寸,图片居中,应该就能满足需求了。
如果选最大的图作为尺寸,也很方便。

当然,其实这样也不太好。
因为素材尺寸不一,它于画面中的居中可能结果并不是预期。
暂时没想到什么好办法。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.