在我们只做手机APP的产品图的时候不可避免的会遇到上拉,下拉的效果,而且除此之外,螅岔出礤在实际的运用中上拉超出之后是会出现吸底的效果,同样的下拉超出之后也会出现吸顶的效果那么这个应该怎么实现呢?
工具/原料
Axure
方法/步骤
1、首先我们先做出一个上下移动的效果,这个相必对于大多数的小伙伴来说还是很简单,如果这一步有问题的话可以参考下面的经验。
下拉吸顶
1、我们都知道在Axure里面其实是可以像程序开发中的代码一样做出判断的,所以我们只需要在结束拖放的时候增加一个判断,并让面板处在一个合适的位置即可。
2、首先我们在最下面创建一个热区然后将其命名为下拉,注意热区不要接触到动态面板,如下图所示:
3、然后我们在交互里面双击“结束拖动动态面板时”弹出用例编辑器,然后再去点击新增条件,具体操作如下图所示:
4、然后我们在弹出的窗口里面进行设置判定条件:判定条件为“当动态面板接触到图片热区鹁鼍漉糍”的时候(设置如下图所示),让动态面板回到绝对位置(0,0),然后保存预览即可
上拉
1、上拉和下拉的操作有一点不同,但是操作上还是这个思想,首先我们还是先创建一个动态面板,这个面板的位置如下图所示:
2、判定条件的豹肉钕舞设置方式和上面一样,但是条件有点不同,上面我们在进行下拉的时候动态面板会接触到热区,但是下拉前是不接触的。而上拉的时候则刚刚相反,原来我们是接触的,上拉之后不接触了。
3、还有就是一点结束拖放后回到的位置也是需要我们进行测量的,这一点有点麻烦,不过我一般选择拉一条线段来进行测量,设置之后回到的绝对位置也就是负的这个值