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

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

实现步骤如下:

1. 首先创建两个矩形。

 一个命名为顶部:(x:0,y:0,w:300,h:50)

 一个命名为底部:(x:0,y:350,w:300,h:50)


如图:

lua上下滑动 设置上下滑动_界面设计

2. 在它们中间加一个动态面板。命名为内容。尺寸:(x:0,y:50,w:300,h:300)

如图:

lua上下滑动 设置上下滑动_界面设计_02

  1. 双击“内容”的动态面板,点击State 1,然后在新打开的界面添加一个动态面板,命名为“底部面板”。这个面板因为是我们滚动的主要内容,所以应该比“内容”的动态面板高度要高,尺寸:(x:0,y:0,w:300,y:600)
  2. lua上下滑动 设置上下滑动_动态面板_03


  3. lua上下滑动 设置上下滑动_lua上下滑动_04


  4. lua上下滑动 设置上下滑动_动态面板_05

  5. 这个时候可以往我们的“底部面板”添加内容了,因为我比较懒,所以添加个矩形就好了,大小不要超过“底部面板”。填充颜色为蓝色。命名为“主要内容”。记得一点,一定要放在底部面板的state1里面,不要放外面啊。不然等会拖动不了。尺寸:(x:0,y:0,w:300,h:600)
  6. lua上下滑动 设置上下滑动_动态面板_06


  7. lua上下滑动 设置上下滑动_动态面板_07

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

lua上下滑动 设置上下滑动_界面设计_08


lua上下滑动 设置上下滑动_动态面板_09


lua上下滑动 设置上下滑动_lua上下滑动_10

  1. 后面在设置拖动完之后的动作了。往里面添加条件。因为这时候我们要防止我们拖动结束之后时,页面会超出我们的屏幕。所以要增加一些限制。条件如图当我们设置好条件。如图。


  2. 还要再添加一个用例在拖动结束之后。跟上面的设置差不多,注意的一点是不要弄错y的位置。

  3. 大功告成,点击预览看一下是否能够拖动吧!如果不能再看一下步骤或图片里的注意事项吧。