xiaopiu

"无"

关注私信

那些创意十足的Loading动效原型合集（一键复用！）

2017-05-03 10:45:00

1 原创经验教程文章/经验 12440 47 9

本帖最后由 xiaopiu 于 2017-5-3 10:53 编辑 Duang！又来新货啦！
APP设计中，我们在很多地方都会用到Loading，全屏加载要Loading，下拉刷新要Loading，上滑加载也要Loading...

所以今天就给大家分享一下我临摹一些好玩的效果自己做的Loading，相比较高冷的GIF图，我的Loading们可是能一键复制，随意修改的源文件（所有组件都是可以修改的）哟。当然，如果你愿意发挥你的聪明才智，分分钟撸一个你自己的也不是不阔以！(☆_☆)

原型效果预览

在线预览地址：http://www.xiaopiu.com/h5/byId?type=project&id=58fda5094fc138923433df7d

（预览链接二维码）

我要怎么用？

方法一：引用「Loading合集」组件库，编辑项目时可以从右侧公用组件库中拖拽使用。

方法二：直接点击编辑项目「Loading合集」，找到想要的Loading效果，跨浏览器Tab复制到自己的项目中。

备注：如果想要修改颜色再用，一定要记得切换到「原始态」进行修改哟！这样会对所有状态生效。

动效怎么做的？

动效都是通过组件「状态」做的。

1. 创建状态：分析每个Loading在动画过程中会有多少种形态，就依次创建多个「状态」；

2. 调整时间：调整状态间的动画时间和曲线（非必需，依具体效果而定）；

3. 添加事件：给每个状态添加「定时」事件切换到相应状态，连接成动画。

我分享的「Loading合集」中每个Loading都是由一个小动效和文案「Loading」组成的，双击后选中小动效组件可以看到它的所有状态和事件，就可以好好琢磨啦！~^_^o~

源文件链接

原型预览：http://www.xiaopiu.com/h5/byId?type=project&id=58fda5094fc138923433df7d
原型下载：http://www.xiaopiu.com/square?searchText=Loading%E5%90%88%E9%9B%86
组件库引用：http://www.xiaopiu.com/square/contr?sort=new&libPop=contr&libId=58ff2eb74c07899660ef8104

其它「资源分享系列」链接

[url=http://www.zhisheji.com/jiaocheng/649687.html]电商（天猫商城）APP原型资源分享
[url=http://www.zhisheji.com/jiaocheng/653918.html]WeUI（微信）原型资源分享
[url=http://www.zhisheji.com/jiaocheng/656811.html]外卖（饿了么）APP原型资源分享
[url=http://www.zhisheji.com/jiaocheng/753185.html]音乐（网易云音乐）APP原型资源分享
[url=http://www.zhisheji.com/jiaocheng/820533.html]新闻阅读（ZAKER等4个）APP原型资源分享

欢迎大家对我们的原型提出建议，对后面分享内容有哪些期待和想法也可以跟我们交流哟！

如果你觉得还不错，就点个赞吧！哈哈，给我一点更下去的动力！～动力！～动力！～

分享：

最新点赞

xiaopiu

"无"
关注私信

你还没有登录，请先登录或注册！

0/500

评论添加表情

全部评论(9)

猜你喜欢

创意摄影《甜蜜的流动》在这光影甜梦中感受摄影的魅力

14876 4 0

281天前

视觉新青年
亚马逊合集

3613 3 0

353天前

素计师
ZAOV·Banner合集

3527 5 0

129天前

召物少年
推广百宝箱
「乐道视觉」2025精选作品合集

2313 1 0

253天前

乐道品牌设计
2024年度海报合集

9690 47 0

290天前

乐阳菜
2024三维作品合集

2300 5 0

199天前

LY木西西
2024年度作品合集

10436 17 0

251天前

大橙子_Design

公众号

微信扫码关注

随时接收优秀内容推荐
领福利

微信扫码即领

2022年全新素材包
APP
签到

商城
反馈
数据

登录后才能查看数据哦
快来登录吧！
点击登录
QQ群
分享
顶部

恭喜作品被选入首页推荐，快去领取奖励吧!点击查看

关注

那些创意十足的Loading动效原型合集（一键复用！）

评论

还可以输入200个字

评论

关闭

直播（斗鱼）APP原型资源分享

8574 7 0

3007天前

xiaopiu
即时通讯（QQ）APP原型资源分享

6695 4 0

3036天前

xiaopiu
金融（支付宝）APP原型资源分享

9009 11 0

3040天前

xiaopiu
健身（Keep）APP原型资源分享

6509 8 0

3047天前

xiaopiu