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

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

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

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

第二步,选中‘界面内容’动态面板,选择用例‘拖动时’(有的axure版本可能是‘拖动动态面板时’)进入用例编辑;

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

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

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

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

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

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

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

猜你喜欢

转载自blog.csdn.net/weixin_41556724/article/details/83011235
今日推荐