使用Axure模拟高仿真iPhone交互动作（4）——列表拖动

列表拖动

Axure6.0中在动态面板移动动作中添加了“拖动”，这就给我们模拟iPhone上的列表自由拖动提供了可能。拖动效果的难点是保持列表上部和下部在屏幕可视范围内，超过该范围可自动弹回。

实现步骤：

1.将iPhone框架中的白色区域放置一灰×××块。然后建立一个动态面板，尺寸320*480，命名为“屏幕”，放置在iPhone框架中的屏幕区域。

2.进入动态面板“屏幕”中，再建立一个动态面板，位置（0,-100），尺寸1000*480，命名为“列表”。此动态面板的作用是放置列表内容，可视区域上部预留100px高度是为了放置“下拉刷新”等操作，若无此类操作可不预留这段范围。

3.进入动态面板“列表”中，在最上部放置一个320*100的灰×××块（与iPhone屏幕色块颜色保持一致），写上“下拉刷新”，代表下拉刷新的区域。

下面放置白×××块及列表。

4.为动态面板“列表”添加拖动时（OnDrag）的交互动作：拖动时沿y轴运动。

现在列表已经可以拖动了，但是上下没有范围限制。

下面我们要给列表加上上下超过范围自动弹回的效果。

5.实现这个效果主要基于部件范围条件，我们先绘制两个图像热区（不会在界面中显示，方便操作，为方便观察，示意图中用白×××块代替）作为范围限制，分别命名为“up”和“down”。

动作逻辑为：如果拖动结束后动态面板“列表”上边沿不在“up”范围内，则自动移回初始位置；若拖动结束后下边界不在“down”范围内，则自动移至列表下边沿与屏幕下边沿对齐。

“up”和“down”的放置位置如下：“up”刚好与“下拉刷新”上边沿相交1px或2px，“down”放置在屏幕下边沿下方。

6.给动态面板“列表”添加结束拖放动态面板时（OnDragDrop）的交互动作，使用条件：如果“列表”不在“up”的范围内。

若满足此条件，则动态面板“列表”自动移回初始位置

7.之后再添加一个用例，使用条件：如果“列表”不在“down”的范围内。

若满足此条件，则动态面板“列表”自动移至下边沿与屏幕下边沿对齐。

动态面板“列表”的最终动作设置结果如下：

至此，列表拖动效果制作完成。

注，因为是模拟手机上的动作交互，拖动时鼠标最好不要超出屏幕范围，否则会出现无法控制等问题。

转载于:https://blog.51cto.com/yerik/1168375