本文将教大家如何用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鼠标点击时,设置,如图:
制作完毕