【随笔】Axure的上下滑动效果制作

来自一个小萌新的Axure的上下滑动效果制作

用Axure做原型是一个很不错的选择，我们前端经常依靠界面设计从而制作页面。这次是做一个当我们在界面上用手指滑动时，手机页面也就跟随滚动，拖拽到底部或者顶部的时候还有个回弹效果。

实现步骤如下：

1. 首先创建两个矩形。
 一个命名为顶部：（x：0，y：0，w：300，h：50）
 一个命名为底部：（x：0，y：350，w：300，h：50）

如图：

2. 在它们中间加一个动态面板。命名为内容。尺寸：（x：0，y：50，w：300，h：300）

如图：

3. 双击“内容”的动态面板，点击State 1，然后在新打开的界面添加一个动态面板，命名为“底部面板”。这个面板因为是我们滚动的主要内容，所以应该比“内容”的动态面板高度要高，尺寸：（x：0，y：0，w：300，y：600）
   
   
   

4. 这个时候可以往我们的“底部面板”添加内容了，因为我比较懒，所以添加个矩形就好了，大小不要超过“底部面板”。填充颜色为蓝色。命名为“主要内容”。记得一点，一定要放在底部面板的state1里面，不要放外面啊。不然等会拖动不了。尺寸：（x：0，y：0，w：300，h：600）
   
   

5. 点击右下角的结构页面里的“内容”动态面板。在右上角那里双击交互内容里面的“拖动时”，设置“移动”，下面的设置如图。

6. 后面在设置拖动完之后的动作了。往里面添加条件。因为这时候我们要防止我们拖动结束之后时，页面会超出我们的屏幕。所以要增加一些限制。条件如图当我们设置好条件。如图。
   
   
   
   
7. 还要再添加一个用例在拖动结束之后。跟上面的设置差不多，注意的一点是不要弄错y的位置。
   
   
   
8. 大功告成，点击预览看一下是否能够拖动吧！如果不能再看一下步骤或图片里的注意事项吧。