WangShuXian6 / blog

FE-BLOG
https://wangshuxian6.github.io/blog/
MIT License
46 stars 10 forks source link

keyframes Animation 帧动画 #88

Open WangShuXian6 opened 5 years ago

WangShuXian6 commented 5 years ago

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

https://gka.js.org/#/ https://github.com/joeyguo/gka

使用简单(仅需一行命令) 内置多种图片优化 多类生成模板,支持定制

安装

npm i gka -g

进行图片去重、空白裁剪、合图优化,使用 canvas 模板,输出 canvas 动画文件

gka E:\img -ucs -t canvas

添加canvas 标签

<canvas id="canvas" ref="canvas" width="750" height="1624" class="fly"></canvas>

设置 canvas 标签 的宽高属性为 gka-data.js 里面的 sourceW ,sourceH

通过 css 设置canvas 的显示宽高