axure商城

AXURE制作手机下拉刷新效果交互原型

AXURE制作手机下拉刷新效果交互原型

QQ截图20150427142634

QQ截图20150427142656

QQ截图20150427142715

效果源文件下载地址:AXURE手机交互下拉刷新和浮动层效果

要求:
1、向下拉动屏幕出现[可刷新]的提示。
2、刷新要有加载过程。
3、刷新完成后屏幕归位。

拖入一个与手机模型屏幕同尺寸的 Dynamic Panel,命名为[mask],其主要的作用是作为后续所有元素的容器,因为要把操作的可视范围限定在屏幕的空间内。
在[mask]中拖入一个稍高于屏幕尺寸的 Dynamic Panel,命名为[screen],高出的部分是用于存放下拉时出现的刷新提示,高度自定,这里我设了 50px,同时将[screen]的位置坐标调整为 x0,y-50,目的是将刷新提示放置在可视范围之外。
在[screen]中拖入一个与屏幕同尺寸的 Dynamic Panel,命名为[content],添加两个 State,分别命名为[content-1][content-2],用于存放刷新前和刷新后的内容,同时把底色调为白色之外的任意色,目的是与刷新区域做一个区别。
在[screen]中再拖入一个与屏幕同宽,高为 50px 的 Dynamic Panel,命名为[refresh],添加两个 State,分别命名为[drag][drag drop],用来存放刷新前和加载时的不同状态提示。
为[mask]添加 OnDrag 事件,并设置动作 Move Panel,拖动方式为 with drag y,即只能沿纵轴方向移动。
为[mask]添加 OnDragDrop 事件,并设置动作:
1、Set Panel state to State,将[refresh]的 State 改为[drag drop],实现加载提示。
2、Wait Time,为加载过程设置一个延迟时间,比如 1000ms。
3、Set Panel state to State,将[content]的 State 改为[content-2],实现刷新后的效果。
好了,现在下拉刷新的效果已经可以实现了,但刷新后如何让被下拉的屏幕归位呢?这里就需要用到一个小技巧了。
拖入一个与屏幕同宽,高为 50px 的 Image Map Region 放置在屏幕的上方,命名为[header]保持它的下边缘与[mask]的上边缘有 2px~3px 的交集,用于判断[mask]的拖动位置,从而让其自动归位。由于 Image Map Region 只是一个图片热点,所以在预览时是不会被看到的。然后在[mask]的 OnDragDrop 事件中添加一个触发条件,用于判断[mask]的 area of widget 是否超出了[header]的范围。
在条件下设置动作:
1、Wait Time,由于之前的加载过程需要 1000ms,所以这里也要设置一个相同的延迟时间用以归位。
2、Move Panel,让[mask]在加载结束后沿纵轴方向移动 −50px,即将高为 50px 的刷新区域再移动至可视范围之外,实现自动归位的效果。
3、Set Panel state to State,最后将[refresh]的 State 再改回[drag],以便于再次刷新时的文案的正确。
搞定,需要注意的是动作的设置要遵从应有的顺序,否则就出乱子了。

给TA买糖
共{{data.count}}人
人已赞赏
高级教程

Axure制作原型提高效率的几个技巧

2015-3-28 17:56:47

高级教程

聊胜于无 Axure Share使用体验报告

2015-5-25 9:11:23

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索