使用 gka 一键生成帧动画
浏览:1169次 出处信息
简单的、高效的帧动画生成工具
gka
gka 是一款简单的、高效的帧动画生成工具。
通过对图片集进行处理,一键式生成序列帧动画文件,并内置相关优化。
一键式 : 图片文件批量序列化重命名,生成 css keyframes,生成帧动画预览文件
性能佳 : 支持图片压缩✓,支持
合图模式
✓,相同帧图片复用
✓多模板 : 内置多种文件输出模板,支持自定义模板
最新更新,请访问 github 地址 https://github.com/joeyguo/gka
帧动画
帧动画是一种常见的动画形式,通过系列图片的连续播放来达到动画效果
使用 css animation 制作帧动画[人工]
从设计师拿到一组图片文件后,开始下面工作
一般需要先修改一下每张图片的文件名
计算 keyframes 中的各个百分比及匹配对应的图片
当使用合图时,需要计算每一帧的位置数据
coding..
如果人工去做这些的话,是相当繁琐的。一旦设计师想改一改动画,重新计算将是繁琐+痛苦..
而这些,使用 gka 一键式生成吧!
gka 安装
gka 使用
gka <options> <files>
gka 示例
生成帧动画 · 普通模式
1.示例参数:
图片目录:E:\gka-test\img
图片名前缀:joe-
2.命令
3.结果:
Before | After |
---|---|
4.效果:
生成帧动画 · 合图模式
1.示例参数:
图片目录:E:\gka-test\img
图片名前缀:iori-
每帧时长:0.08
2.命令
3.结果:
Before | After |
---|---|
4.效果:
Github
https://github.com/joeyguo/gka
Welcome
欢迎 Pull requests、Issues 一般在24小时内处理
讨论与咨询请+QQ 3201590286
建议继续学习:
- jQuery Color Animations颜色动画插件 (阅读:7070)
- css3-animation制作逐帧动画 (阅读:5297)
- 解决jQuery动画在chrome下暴走的问题 (阅读:3121)
- jQuery中的动画 (阅读:2857)
- 利用php创建打印文字动画效果 (阅读:2733)
- 闲谈CSS3动画 (阅读:2637)
- 完美实现GIF动画缩略图 (阅读:2622)
- CSS3 动画系列 (阅读:2433)
- ReactNative Animated动画详解 (阅读:2594)
- 使用Jscex实现排序算法动画 (阅读:2327)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:自动人脸识别基本原理
后一篇:sproxy开发体验 >>
文章信息
- 作者:TAT.joeyguo 来源: AlloyTeam
- 标签: gka 动画
- 发布时间:2017-10-15 09:30:36
建议继续学习
近3天十大热文
- [66] Oracle MTS模式下 进程地址与会话信
- [65] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [58] IOS安全–浅谈关于IOS加固的几种方法
- [52] 视觉调整-设计师 vs. 逻辑
- [47] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成