Axure教程——滑动解锁

本文将教大家如何用AXURE中的动态面板制作滑动解锁
一 、效果
在这里插入图片描述
预览地址:https://6dnu91.axshare.com

二、功能
滑动滑块从左到右,提示验证成功

三、制作
拖入一个动态面板组件,如图:
在这里插入图片描述
点击动态面板进入,拖入一个矩形命名为1,初始值设置为0,用来记录滑动的X值,如图:
在这里插入图片描述
并设置矩形为隐藏状态

拖入一个矩形,设置颜色为#FEA213,大小为8×25,圆角v半径为3,如图:
在这里插入图片描述
拖入一个矩形,设置大小为300×25,为滑块运动轨迹,如图:
在这里插入图片描述
拖入一个矩形命名为2,设置大小为74×35,设置文字为"再滑一次",并设置为隐藏状态,如图:
在这里插入图片描述
拖入一个矩形,大小为50×35,颜色为#0000FF,此矩形为滑块,如图:

在这里插入图片描述
所有制作完毕,最终设计为:
在这里插入图片描述
四、交互设置
1、滑块设置
滑块拖动时设置,如图:
在这里插入图片描述
滑块拖动结束时,设置如图:
在这里插入图片描述
2、矩形2设置
当矩形2鼠标点击时,设置,如图:
在这里插入图片描述
制作完毕

### Axure 10 中实现滑屏效果的教程 #### 使用动态面板创建基本结构 为了在 Axure 10 中实现滑屏效果,可以利用动态面板来构建交互模型。首先,在页面上放置一个足够大的矩形作为背景容器,并在其内部嵌入多个子动态面板用于表示不同屏幕的内容[^1]。 ```html <div id="container"> <!-- 子动态面板 --> </div> ``` #### 设置初始状态与布局调整 确保这些子动态面板按照顺序水平排列并超出视窗宽度范围外不可见部分隐藏起来;同时设置好它们各自的尺寸大小以及位置参数以便后续操作更加便捷高效[^3]。 #### 添加手势触发条件 对于移动端而言,触摸事件是非常重要的互动方式之一。因此需要给整个大容器添加相应的鼠标按下/抬起动作(模拟手指触碰行为),并通过判断坐标变化量来决定是否执行切换逻辑[^2]。 当检测到用户向左或右方向快速划过一定距离时,则立即改变当前显示区域内的索引值从而达到翻页目的: ```javascript // 假设有一个名为 currentIndex 的变量记录着正在观看哪一页 if (swipeDirection === &#39;left&#39;) { currentIndex++; } else if (swipeDirection === &#39;right&#39;) { currentIndex--; } ``` #### 实现平滑过渡动画 为了让用户体验更佳流畅自然,在每次更新完新的目标位置之后还应该附加一段持续时间较短但视觉感受舒适的位移过程。这可以通过配置 `Move` 动作中的属性完成,比如指定偏移量为负数乘以单个 item 宽度加上间距等细节处理。 最后记得将所有相关联的对象都放入同一个父级分组内管理维护,这样有助于提高工作效率减少错误发生几率的同时也方便日后修改优化方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Andy&lin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值