APP设计中创意十足的Loading动效
2017-08-04 本文已影响0人
菡岱
APP设计中会用很多地方会到Loading,全屏加载要Loading,下拉刷新要Loading,上滑加载也要Loading…创意十足的Loading动效会给人耳目一新的感觉,会减少等待的焦灼感。所以今天分享给大家一些好玩的Loading效果,真的是创意十足,相比较高冷的GIF图,我的Loading们可是能一键复制,随意修改的源文件(所有组件都是可以修改的)哟。 即将欣赏APP设计中创意十足的Loading动效原型效果预览:
![](https://img.haomeiwen.com/i5545549/303f45982216f534.gif)
![](https://img.haomeiwen.com/i5545549/6a73f793d0605b2c.gif)
![](https://img.haomeiwen.com/i5545549/761e808aa02f8d2c.gif)
![](https://img.haomeiwen.com/i5545549/3e5817483433b567.gif)
![](https://img.haomeiwen.com/i5545549/276a2bfac7f5eb5f.gif)
![](https://img.haomeiwen.com/i5545549/6fd1e7ea1312cdff.gif)
![](https://img.haomeiwen.com/i5545549/5bc0626cb7408cfd.gif)
![](https://img.haomeiwen.com/i5545549/2c5e8639e5cc8ee8.gif)
![](https://img.haomeiwen.com/i5545549/803e0815f1184174.gif)
![](https://img.haomeiwen.com/i5545549/88fd615e9ddb7898.gif)
![](https://img.haomeiwen.com/i5545549/3d4e4517b00c09e5.gif)
我要怎么用?
方法一:引用Loading组件库,编辑项目时可以从右侧公用组件库中拖拽使用。
![](https://img.haomeiwen.com/i5545549/c16a354fc9fb0750.gif)
方法二:直接点击编辑项目Loading,找到想要的Loading效果,跨浏览器Tab复制到自己的项目中。
![](https://img.haomeiwen.com/i5545549/2af718acf8e2150b.gif)
备注:如果想要修改颜色再用,一定要记得切换到「原始态」进行修改哟!这样会对所有状态生效。
动效怎么做的?
动效都是通过组件「状态」做的。
1. 创建状态:分析每个Loading在动画过程中会有多少种形态,就依次创建多个「状态」;
2. 调整时间:调整状态间的动画时间和曲线(非必需,依具体效果而定);
3. 添加事件:给每个状态添加「定时」事件切换到相应状态,连接成动画。
![](https://img.haomeiwen.com/i5545549/8bfded5d09ab4e04.gif)
小编分享的每个Loading都是由一个小动效和文案「Loading」组成的,双击后选中小动效组件可以看到它的所有状态和事件,就可以好好琢磨啦。到这里今天的APP设计中创意十足的Loading动效就结束了,喜欢的多多关注我们吧。
![](https://img.haomeiwen.com/i5545549/af2bd95622b0e68a.gif)
资源地址: http://blog.silucg.com/UI/sj/7370.html