使用Axure模拟高仿真iPhone交互动作（5）――图片浏览

图片浏览

图片浏览和列表拖动比较像，难点是拖动结束的时候需要判断将哪一张图片自动调整到屏幕中间的位置，也就是模拟“自动吸附”的效果。

实现步骤：

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

2.进入动态面板“屏幕”中，再建立一个动态面板，位置（0,0），尺寸960*480（3倍屏幕宽度），命名为“图片”。此动态面板的作用是放置图片。

3.进入动态面板“图片”中，在有效区域绘制灰色色块背景（与屏幕灰色相同）并放置三张图片。

4.为动态面板“图片”添加拖动时沿x轴运动的交互动作。

此时图片已经可以在窗口范围内拖动了。

5.下面实现图片到达一定位置就自动吸附的效果。原理和列表拖动类似，也是通过范围限制实现。

控制区域同样由图像热区绘制，分布如下图：图片1为屏幕位置，范围1宽度160px，范围2宽度320px，范围3宽度480px；范围4宽度320px，位于整个图像区域右侧。

6.为动态面板“图片”添加拖动结束后的条件状态动作。

拖动结束后弹回图片1状态：动态面板“图片”与范围1相交且不与范围2相交，即未超过图片1的一半位置时，拖放结束后回到图片1位置。

动态面板“图片”与范围4相交时，即图片1为首张图片时还向右拖动，拖放结束后回到图片1位置

拖动结束后弹回图片2状态：动态面板“图片”与范围2相交且不与范围3相交，即超过图片1的一半位置或未超过图片2一半位置时，拖放结束后回到图片2位置。

拖动结束后弹回图片3状态：动态面板“图片”与范围3相交时，即超过图片2一半位置或图片3为最后一张图片还向左拖动时，拖放结束后回到图片3位置

动态面板“图片”的全部交互动作设置如下：

至此，图片浏览效果制作完成。