Axure教程:拖动事件和滚动事件

发布时间: 2019-11-07 16:47:09 来源: admin

网上有很多关于axure的教程,但是根据我的学习过程,我认为axure不需要你花一整段时间去努力学习。你需要什么效果?然而,没有办法在网上找到相应的方案来达到预期的效果。因此,我也希望我能整理出我以前查询过的教程,并给需要的学生参考。

这次我们将一起讨论axure中的拖动事件和滚动事件。您可以根据下面的标题快速找到相应的教程。不理解这种差异的学生可以有一个大致的了解。

应用场景,例如:移动位置;滑动验证;拖动以上传;拖动以排序等。

操作模式:电脑侧:按住手机侧的鼠标左键;按住手指移动。

这次我们以一个简单的滑块为例:

(1)首先在轴上画一个简单的滑块

(2)将原型滑块的右键设置为动态面板(拖动和滚动事件只能为动态面板设置)

(3)为动态面板设置拖动事件,并允许滑块动态面板在拖动时水平移动

(4)完成,预览

当我们预览时,我们会发现滑块将超出矩形线段的范围,这不是我们想要的效果。

(5)设置拖动边界(演示中左侧大于40px,右侧小于610px)

(6)操作完成。让我们预览一下效果

在线预览地址:https://lanhuapp.com/url/hgx0c

应用场景,例如:显示长页面;在线滚动是一个机顶盒按钮;滚动到切换选项卡等。

操作模式:电脑侧:鼠标滚轮上下滚动手机侧:上下滑动

这次我们将以chrome的无限插件切换效果为例:

(1)首先在axure中画一个简单的线路图(懒惰和强迫症,我先拍一张截图)

(2)调整第一页和第二页的位置后,将它们合并成组,同时创建动态面板

(3)调整动态面板的大小。这是非常重要的一步。如果你以前的尝试没有成功,这可能是这个步骤中的一个问题。仅当动态面板可以上下滚动时滚动,即动态面板面积小于内容时。因此,我们将动态面板调整到比内容小1px的高度和合适的宽度。(如果没有滚动条,您可以右键单击动态面板并选择显示滚动条)

(4)为动态面板设置滚动事件,并分别上下滚动时移动到所需位置。为了不那么僵硬,我们添加了一个500毫秒的弹性动画。

(5)现在期望的效果已经完成,但是作为完美主义,让我们最后隐藏滚动条。

(6)预期效果已经完美完成。最后,让我们顺便添加上面提到的拖动事件。将拖动设置为向左和向右分别移动到相应的位置,同时将拖动设置为与拖动一起移动(稍微增加边界左右距离,效果会更好)

预览地址:https://lanhuapp.com/url/ru69f

本教程到此结束。如果您有任何其他想要的效果,请在下面留言。让我们一起学习和讨论它。

这篇文章最初是由“糊萝卜粥”发表的。每个人都是产品经理。未经允许禁止复制。

主题地图来自unsplash,基于cc0协议。

甘肃十一选五开奖结果 北京十一选五 广东快乐十分开奖结果 pk10注册 pk10购买

上一篇:又是闺女!“死侍”三胎再得“小情人”:我梦想被9个女儿簇拥
下一篇:加码逆周期调节 巩固需求回暖势头

友情链接

Copyright 2018-2019 taoba33.com 沙蒋资讯 Inc. All Rights Reserved.