gka的使用

h5 序列帧动画

主要解决场景：图片太多，精灵图需要定位很多次的时候手写比较麻烦而且很耗费时间，通过Gka工具可以省时省力，并且精确完成。

 

官方文档链接：https://gka.js.org/#/?id=gka。

 

安装方式：npm i gka -g
使用方式：将图片放在文件夹中。

例如test1目前在下载目录中，图片存放在test1中。

 

展示案例gka指令，快速生成动画文件

 

1:gka /Users/herowu/Downloads/test1 -sa binary-tree --count 9

 

2:/Users/herowu/Downloads/test1 表示当前存放图片的文件路径

 

3:选项和选项参数根据官方文档链接以及自身需求去填写，下面-sa 到--count9 均为选项事例展示。

 

4:-sa binary-tree --count 9 -s表示合成优化生成精灵图（雪碧图）

 

5:a 合图布局模式 默认 left-right，可选 binary-tree | top-down ..

 

6:--count 9 表示将9张图生成一张精灵图。

 

例如：test1 中有50多张小图

通过上述指令将test1生成一个文件夹，内部有三个文件如图所示。
将gka.html 放在viscode里面，将需要的动画序列帧代码CV到需要动画序列帧的项目中。

img文件夹是自动按照 --count 9 9张小图拼接成的精灵图

x

 

选项和选项参数根据官方文档链接以及自身需求去填写！！