cloud

使用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”的范围内。

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

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

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

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

   
© cloud | Powered by LOFTER
评论(2)
热度(41)
  1. 隐身......cloud 转载了此文字
  2. Singki Zhoucloud 转载了此文字
  3. Sweetlicloud 转载了此文字
  4. 变乖De小米cloud 转载了此文字
    发现这篇教程中有两处参数设置有误,附上我设置的“列表”动态面板参数截图,红框标注了不同之处。
  5. tiramisucloud 转载了此文字
  6. Homecloud 转载了此文字
  7. 呆呆cloud 转载了此文字
  8. 未命名-另存为cloud 转载了此文字
  9. orangescloud 转载了此文字
  10. 未命名cloud 转载了此文字
  11. 未命名cloud 转载了此文字
  12. 未命名cloud 转载了此文字