技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 其他 --> 使用 gka 一键生成帧动画

使用 gka 一键生成帧动画

浏览:1169次  出处信息

gka

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


gka

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

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

  • 一键式 : 图片文件批量序列化重命名,生成 css keyframes,生成帧动画预览文件

  • 性能佳 : 支持图片压缩✓,支持合图模式✓,相同帧图片复用

  • 多模板 : 内置多种文件输出模板,支持自定义模板

最新更新,请访问 github 地址 https://github.com/joeyguo/gka

帧动画

帧动画是一种常见的动画形式,通过系列图片的连续播放来达到动画效果

preview

使用 css animation 制作帧动画[人工]

从设计师拿到一组图片文件后,开始下面工作

  1. 一般需要先修改一下每张图片的文件名

  2. 计算 keyframes 中的各个百分比及匹配对应的图片

  3. 当使用合图时,需要计算每一帧的位置数据

  4. coding..

如果人工去做这些的话,是相当繁琐的。一旦设计师想改一改动画,重新计算将是繁琐+痛苦..

而这些,使用 gka 一键式生成吧!

gka 安装



gka 使用

gka <options> <files>



gka 示例

生成帧动画 · 普通模式



1.示例参数:

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

  • 图片名前缀:joe-

2.命令



3.结果:

BeforeAfter

4.效果:

joe

在线地址

生成帧动画 · 合图模式



1.示例参数:

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

  • 图片名前缀:iori-

  • 每帧时长:0.08

2.命令



3.结果:

BeforeAfter

4.效果:

iori

在线地址

Github

https://github.com/joeyguo/gka

Welcome

后一篇:sproxy开发体验 >>
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1