Axure8.0 页面上下滑动效果实现

更多教程见:https://www.axure.com/support/training/account-login-tutorial

1.打开Axure 8.0,在网上找一个iPhone外壳的图片,然后添加大小和手机屏幕相等的动态面板,命名为“屏幕”
Axure8.0 页面上下滑动效果实现_第1张图片

Axure8.0 页面上下滑动效果实现_第2张图片

2.然后双击State1,添加一个矩形,宽度=屏幕宽度,长度任意。
然后选中矩形,点击鼠标右键,选择转换为动态面板,命名为“内容”

3.然后在“内容”动态面板中,搭建你的手机界面。如图,我随便添加了几个Axure自带的原件

Axure8.0 页面上下滑动效果实现_第3张图片

4 然后回到首界面,选中“屏幕”动态面板,双击【拖动时】

Axure8.0 页面上下滑动效果实现_第4张图片

5.选择【移动】,勾选“内容”动态面板,选择移动为垂直移动
Axure8.0 页面上下滑动效果实现_第5张图片

6.点击添加边界。

⑴顶部<=0
⑵顶部 >= [[LVAR1.Height-LVAR2.Height]]
其中,LVAR1是屏幕,LVAR2是内容

Axure8.0 页面上下滑动效果实现_第6张图片

注:水平移动时,选择“水平拖动”,边界添加到左侧,
⑴左侧<=0
⑵左侧 >= [[LVAR1.Width-LVAR2.Width]]

你可能感兴趣的:(Axure8.0使用)