Axure怎么做出上拉吸顶,下拉吸底的效果

 时间:2024-10-21 14:23:50

在我们只做手机APP的产品图的时候不可避免的会遇到上拉,下拉的效果,而且除此之外,螅岔出礤在实际的运用中上拉超出之后是会出现吸底的效果,同样的下拉超出之后也会出现吸顶的效果那么这个应该怎么实现呢?

工具/原料

Axure

方法/步骤

1、首先我们先做出一个上下移动的效果,这个相必对于大多数的小伙伴来说还是很简单,如果这一步有问题的话可以参考下面的经验。

Axure怎么做出上拉吸顶,下拉吸底的效果

下拉吸顶

1、我们都知道在Axure里面其实是可以像程序开发中的代码一样做出判断的,所以我们只需要在结束拖放的时候增加一个判断,并让面板处在一个合适的位置即可。

Axure怎么做出上拉吸顶,下拉吸底的效果

2、首先我们在最下面创建一个热区然后将其命名为下拉,注意热区不要接触到动态面板,如下图所示:

Axure怎么做出上拉吸顶,下拉吸底的效果

3、然后我们在交互里面双击“结束拖动动态面板时”弹出用例编辑器,然后再去点击新增条件,具体操作如下图所示:

Axure怎么做出上拉吸顶,下拉吸底的效果

4、然后我们在弹出的窗口里面进行设置判定条件:判定条件为“当动态面板接触到图片热区鹁鼍漉糍”的时候(设置如下图所示),让动态面板回到绝对位置(0,0),然后保存预览即可

Axure怎么做出上拉吸顶,下拉吸底的效果

Axure怎么做出上拉吸顶,下拉吸底的效果

上拉

1、上拉和下拉的操作有一点不同,但是操作上还是这个思想,首先我们还是先创建一个动态面板,这个面板的位置如下图所示:

Axure怎么做出上拉吸顶,下拉吸底的效果

2、判定条件的豹肉钕舞设置方式和上面一样,但是条件有点不同,上面我们在进行下拉的时候动态面板会接触到热区,但是下拉前是不接触的。而上拉的时候则刚刚相反,原来我们是接触的,上拉之后不接触了。

Axure怎么做出上拉吸顶,下拉吸底的效果

3、还有就是一点结束拖放后回到的位置也是需要我们进行测量的,这一点有点麻烦,不过我一般选择拉一条线段来进行测量,设置之后回到的绝对位置也就是负的这个值

Axure怎么做出上拉吸顶,下拉吸底的效果

Axure怎么做出上拉吸顶,下拉吸底的效果

征信黑了怎么分期二手车 云闪付1元全年24次游泳健身体验怎么领取 华为畅享8如何设置指纹 OPPO A11x怎么设置个人热点 怎样利用跑步机锻炼快速减体重
热门搜索
卡通城堡图片 画框图片 3d 无尽 动漫 可爱 得到 日本动漫网 新妹魔王的契约者动漫