《Axure制作微信下拉刷新操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,中继器,界面组成,动态面板等多维度案例或实操来进行更多的学习;此教程是由小马在2021-08-27发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
今天教大家如何制作下滑刷新axure交互设计,以微信朋友圈为例子,我们做一个下拉刷新的交互设计,下拉刷新有助我们查看最新消息最新动态,具体详细步骤如下:
效果图:
提醒:因为我们每一次的更新都是在原有的原型基础上开展的,因此原型会越来越复杂。效果描述:本次我们展现下拉刷新效果,下拉列表,出现刷新icon,松开手指,页面弹回,刷新结束后,刷新icon消失。
元件.top 函数:获取元件对象的上边界坐标值,拖动页面时,页面top值超过一定程度的时候,让页面弹回到初始位置。向下拖动页面的时候,出现下拉刷新icon。
准备元件,我们准备好朋友圈页面的内容,并将其转换成动态面板,准备一个返回icon,一个相机icon和一个下拉刷新的gif图。(gif图已经上传到附件内,我们就不具体演示了)
我们元件排序:返回icon、相机icon、下拉刷新icon(隐藏)在顶,朋友圈内容的动态面板在底。
先简单讲一下设置逻辑,我们再上图:我们在拖动内容动态面板的时候。可能向上拖动,可能向下拖动,虽然向上拖动和向下拖动是设置在同一个交互内的,但是我们为了做到下拉刷新自动弹回,那么就要设置两种条件。我们让动态面板沿着Y轴自由拖动,但是元件顶部超过一定的高度的时候,需要出现下拉刷新的icon,这就是下拉场景,同时在超过一定高度的时候,松开手,这时候页面会自动弹回。
我们一起来看,选择内容动态面板:
拖动时,if this.top≤0,让动态面板随着手指沿着Y轴移动,设置边界为顶部坐标≤250,底部坐标≥644,隐藏 下拉刷新icon。
else if,让动态面板随着手指沿着Y轴移动,设置边界为顶部坐标≤250,底部坐标≥644,显示下拉刷新icon。
如图所示:
拖动结束时,if this.top≥1,移动 动态面板 到 (0,0),等待 500ms,隐藏 下拉刷新icon。
(等待500ms是为了更好的模拟刷新等待的效果)
本次原型内容做在了左侧的微信中。
原型文件可以通过下边的链接下载:https://pan.baidu.com/s/1jub385QC4AuNxkBxAa6aFA密码:q2cf
注意哦,我们的原型只能用Axure RP 9打开哦。
以上就是axure制作微信下拉刷新操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。赠人玫瑰,手有余香
2022-06-21 10:20
2022-06-15 09:23
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论