Axure教程:如何制作超简单机械加载效果

玲玲酱
1 评论 2649 浏览 14 收藏 3 分钟
🔗 产品经理的职业发展路径主要有四个方向:专业线、管理线、项目线和自主创业。管理线是指转向管理岗位,带一个团队..

本人教大家,如何利用Axure制作超简单机械加载效果,enjoy~

看看效果:

Axure教学之超简单机械加载效果

可以学到什么?

  1. 循环动态面板的应用
  2. 有关循环动画怎么处理
  3. 自带元件库的使用

第一步:绘制

在系统元件库里搜索“齿轮”。

Axure教学之超简单机械加载效果

添加三个到画布,设置尺寸180*180,依次命名齿轮1、齿轮2、齿轮3,如图分布:

Axure教学之超简单机械加载效果

第二步:制作动效

创建一个动态面板,添加2个状态,命名“控制”。

新建交互【状态改变时】:

  1. 旋转齿轮2顺时针经过360°,动画线性5000ms;
  2. 旋转齿轮3逆时针经过360°,动画线性5000ms;
  3. 旋转齿轮1逆时针经过360°,动画线性5000ms。

Axure教学之超简单机械加载效果

然后需要驱动“控制”动态面板循环的交互,在什么都不选择的情况下,点击交互,页面载入时,设置“控制”动态面板下一项循环间隔5000ms。

Axure教学之超简单机械加载效果

以上做的两个步骤即每隔5秒触发一次动态面板循环,动态面板循环一次,就转动齿轮一周,转动时间5秒。

第三步:效果

有没有感觉很舒服!!!用循环动态面板同样可以做出加载中省略号从一点到三点循环下去的效果,大家动动脑筋做做看吧!

Axure教学之超简单机械加载效果

 

本文由 @索大佩罗娜 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 看完一篇原型设计文章啦,感觉还是不太会?

    😡 想从0基础开始学习Axure么?推荐你找Axure实战班的助教小可爱@CC-起点学院(微信:qidiancc520),回复关键词:大礼包

    领取原型设计大礼包,多学多练,你也能成为原型设计高手哦!

    来自广东 回复
专题
15510人已学习14篇文章
交互设计本质上就是设计产品的使用方式的过程,“如何才能做出合理的B端交互决策”是很多人都在思考的问题。本专题的文章分享了B端交互设计指南。
专题
37853人已学习22篇文章
复盘是产品经理和运营人提高自身竞争力的不二法门。
专题
12158人已学习13篇文章
2023年已结束,你的年终总结写好了吗?本专题的文章分享了如何做好年终总结。
专题
104168人已学习5篇文章
PRD、MRD、DRD、BRD各种文档撰写方法在这里。
专题
19997人已学习18篇文章
物流仓储系统是实现物流高效运转的基础。本专题的文章提供了物流仓储系统设计指南。
专题
34928人已学习23篇文章
不懂心理学,怎么懂你的用户;不懂你的用户,又怎么做好产品的设计和运营。