Axure制作手机UI原型之界面滑动滚动效果

用Axure制作手机界面原型的时候，往往会遇到像Android中listview那种页面，手指在界面上滑动，页面也就跟随滚动，拖拽到底部或者顶部的时候还有个回弹效果，如何在Axure之中模拟这种滚动呢，是用其内部框架linline frame? 用这个有以下几点不妥：

1.      该框架的边框在手机上实在太丑。

2.      只能连接到其他界面，这是不舒服的一点，试想这个内部界面在导航中打开，别人都不知道你这界面是怎么回事。

下面我们用动态面板来实现这种效果，总体办法是在动态面板中再嵌套一个动态面板。

实现步骤如下：

1.      首先创建一个动态面板，这里命名为外层面板。如图：

（图片中间为水印）

2.      外层面板只需要一个状态就行了。然后在该状态中再添加一个动态面板。将这个面板命名为内层面板。

这个动态面板为页面的实际大小，这里为了做滚动效果其长度应该比外层面板更长，这里就两倍长吧，滚动两屏（根据实际自行决定长度），外层面板就相当于一个遮罩的作用，挡住红杏出墙的那部分。

3.      现在的结构如图所示，在内层面板中就可以加入你的页面内容了，如下图我加入的图片，文字，按钮的条目：

接下来就是关键的步骤了。

4.      给内层面板添加拖动事件，如图，预览就可以拖动了，但是可以需要添加限制，避免将页面拖出手机框。

5.      在页面上端和下端添加两个矩形框，作为辨识位，分别命名为上端、下端。如图所示：

可以添加在页面上，也可以添加在外层面板内部，接下来添加限制事件。

注意一定要在拖动结束时事件中添加该约束。

好大功告成，这样就实现了拖拽滚动页面，到顶部后自动回弹的效果。最后总结下其实非常的简单，就是在动态面板中嵌套动态面板，然后在动态面板中的拖动事件中来移动内层面板的方式来模拟手指移动滑动的效果，最后通过两个矩形框的限制达到限制移动范围并回弹的目的。

赶紧试试吧。

同样方法可以做手机横向滑动效果。要做浏览图片的效果可以参看知乎中方法http://www.zhihu.com/question/20417830。他这有个缺点就是没加限制，如上方法添加限制就可以了，只是在添加矩形的时候可以将右侧的矩形框添加到手机边框外，避免拖出手机边框。