AXURE交互实例介绍

文章介绍了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]，以便于再次刷新时的文案的正确。

搞定，需要注意的是动作的设置要遵从应有的顺序，否则就出乱子了。