您现在的位置:首页 --> JavaScript --> 多个动画间存在部分相同动画的优化方案:gka
多个动画间存在部分相同动画的优化方案:gka
浏览:944次 出处信息
“抓娃娃”并不陌生,存在两种结果:抓到与抓不到。在 Web 动画中,如上图,“抓到”与“抓不到”对应着两个动画,可以使用不同的动画图片资源来实现,似乎毫无异义。
细做观察,不难发现:两个动画中“动画初始到抓取”及“抓取结束到动画结束”的区间中存在相同动画(滑动和晃动抓杆)。既然动画相同,那么可以通过引用同一份动画图片资源,不做相同图片的重复加载,从而减少总资源大小。
“两个动画间存在部分相同的动画,相同部分可以引用同一份动画图片资源,来减少图片的总大小。”
肉眼进行辨别哪些动画是一样的?那是不可能的。gka提供一键式制作多个动画的方式,支持多种图片优化方案(含图片去重)。
gka 是一款简单的、高效的帧动画生成工具,图片处理工具。
官方文档:https://gka.js.org
Github:https://github.com/gkajs/gka
使用gka处理多个帧动画的方式
举例,图片文件夹地址为 /workspace/img/ 中包含抓取“失败”和“成功”的动画图片文件夹 fail,succeed
文件夹:/workspace/img/ |
---|
使用下方命令,gka 将会把这两个动画图片进行统一处理,并生成对应的动画文件。
文件夹:/workspace/gka-img-css/ |
---|
结合 gka 提供的其他参数一同使用,如 -u 进行图片去重,那么两个动画中相同部分的动画便引用同样的图片资源,图片总大小将大大减少!
欢迎使用 gka ,欢迎任何意见或建议,谢谢 :D
GitHub: https://github.com/gkajs/gka
建议继续学习:
- jQuery Color Animations颜色动画插件 (阅读:7088)
- css3-animation制作逐帧动画 (阅读:5317)
- 解决jQuery动画在chrome下暴走的问题 (阅读:3139)
- jQuery中的动画 (阅读:2870)
- 利用php创建打印文字动画效果 (阅读:2745)
- 闲谈CSS3动画 (阅读:2650)
- 完美实现GIF动画缩略图 (阅读:2651)
- CSS3 动画系列 (阅读:2447)
- ReactNative Animated动画详解 (阅读:2647)
- 使用Jscex实现排序算法动画 (阅读:2345)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:React一线问题十问十答
后一篇:Rax 系列教程(长列表) >>
文章信息
- 作者:TAT.joeyguo 来源: AlloyTeam
- 标签: gka 动画
- 发布时间:2019-01-01 20:20:55
建议继续学习
近3天十大热文
- [54] IOS安全–浅谈关于IOS加固的几种方法
- [52] android 开发入门
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [49] Go Reflect 性能
- [49] Oracle MTS模式下 进程地址与会话信
- [47] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [35] 程序员技术练级攻略
- [27] 视觉调整-设计师 vs. 逻辑