Axure学习笔记整理4-实现APP页面上下滑动及弹回效果

相对于其他交互效果，Axure制作app页面的上下滑动效果还是比较简单的。

为了使效果显著一点，先做一款简单的原型如下。

第一步，将下面框起来的部分要做滑动的内容选好，点击鼠标右键‘转化为动态面板’，并把这个动态面板命名为‘界面内容’；

第二步，选中‘界面内容’动态面板，选择用例‘拖动时’（有的axure版本可能是‘拖动动态面板时’）进入用例编辑；

选择‘移动--勾选’界面内容‘--选择’垂直拖动‘（有的axure版本可能是‘延y轴移动’）；

这样确认后预览可以实现页面滑动的效果了；

第三步，到弹回的效果实现了：先拖拽一条水平线放在页面上方下图所示位置，并命名为’顶部接触线‘，是为了使界面内容接触到这根线后弹回；先记录下’界面内容‘动态面板所在位置，我这里是（0，53）；

第四步，添加弹回的交互用例：选中动态面板，选择用例’拖动结束时‘；进入用例编辑页面后首先选择’添加条件‘；

’条件设立‘页面选择‘元件范围’接触到‘顶部接触线’；

条件设立确认后，编辑用例选择‘移动’--勾选‘界面内容’--选择‘移动位置’ 坐标--之前记录下来的（0，53）；

确认用例编辑后可以预览效果，这样就可以实现上方弹回的效果了；下方弹回也可以用同样的方法。