《Axure教程:模拟滑动效果》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强交互产品,全局变量,动态面板,事件等多维度案例或实操来进行更多的学习;此教程是由HarryTao在2021-08-27发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
本文简要地为大家展示了,如何Axure模拟纵向滑动的效果,enjoy~
先准备一个动态面板两个底部的ico,我懒就随便弄了俩矩形,然后,给命名成tab1和tab2。这里没放图,是元件命名的那个地方;然后给动态面板起个名字——page1。
里面两个状态页面默认的就好,我这里是state1和state2,话不多,上图:
动态面板的里面很简单,把动态面板里面的内容组合起来命名为page_tab1和page_tab2,就和上面显示出来的差不多,但是要比动态面板的长度要高一点,就不放图了。
2.1 左右滑动事件
选中动态面板,属性>向左拖动结束>添加条件>选中状态,这里选择tab1值等于ture。
既然要滑动肯定要有动态切换,设置动态面板page1的选择状态为state2,动画可以根据自己喜好来加,看其他人的教程都没有考虑过下面这两个tab的切换问题,所以我写了这个教程。
页面已经切换了,那么底部的TabBar的状态当然要变更,这就就是设置下面的选中状态为tab2。
最后移动page_tab2移动到(0.0)意思就是切换的时候刷新页面,不想刷新可以不设置,这里只放一个综合的,话不多看图:
然后同理在设置一遍向左滑动时候状态.
2.2 上下滑动事件
首先和左右滑动一样 先判断选中状态,和上面的一样,我就不上图了。
选择移动,当动态面板选中的是state1的话,就选择state1里面的那个页面,里面的组合页面我这里是page_tab1。
接下来需要给上下滑动添加一个界限,我这里用的变量,顶部使用小于等于,底部使用大于等于,当然也可以使用绝对位置,为了装X我用的变量,用绝对位置的话顶部是0,底部是你动态面板高度值。
接下来我说下变量怎么选。
增加一个局部变量,名字随便,我命名的是bg,让bg这个原件的值等于page1也就是动态面板的值,最后插入这个变量,使用[[bg.top]]来定义滑动的顶部,同样的方法在定义一个bg然后插入一个变量,使用[[bg.bottom]]来定义滑动的底部。
同理,在判断当选中条件等于state2的时候,选择在把动态面板里面的state2按照上面的步骤再来一遍,就OK了!
以上就是Axure教程:模拟滑动效果的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure后台下拉菜单:展示式菜单
2022-08-31 08:13
2022-06-14 10:00
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论