Axure实现注册滑动验证
我们先来预览一下效果
第一步 准备元件
- 在面板当中拖入一个
矩形
,设置 w:300 h:35 我们给他取名为垫底的矩形
- 拖入一个
热区
设置 w:10 h:35 备用(命名为接触点
) - 拖入一个和
垫底的矩形
一样的矩形
,设置背景颜色为红色
然后转换成动态面板
(命名为背景颜色面板
) - 拖入一个
矩形
设置 w:40 h:35转换为动态面板
(命名为移动块
) - 拖入一个和
垫底的矩形
一样的矩形
,输入文字“请按住 滑块,拖动到最右边
” (命名检查条
) - 拖入一个
矩形
设置 w:180 h:35 设置为禁用 (命名下一步
)
第二步 摆放元件
- 将
垫底的矩形
放到面板中 我放的坐标是 x:63 y:57(这个用到绝对位置,如果位置摆放和我的这个不一样的话,后面用到的绝对位置也要做相对的调整) - 将刚才拖入的
热区(接触点)
放到垫底的矩形
右侧紧挨着。 - 把
检查条
放到垫底的矩形
上面完全覆盖 - 进入
背景颜色面板
-把状态1
中的矩形
坐标设置为 x:-300 y:35 - 设置好之后把它放到
检查条
上面完全覆盖 - 将
移动块
放到背景颜色面板
上方和头部对齐
第三步 添加用例
- 设置
移动块
动态面板-移动时
-选择红色进度条矩形
-移动方式选择为-跟随
- 拖动时-添加条件—选择“元件范围-
移动块
-未接触-元件范围-接触点”设置好点击确定 - 在这个条件下 添加动作
移动
选择元件移动块
设置为水平拖动
添加界限
左侧大于等于80 右侧小于等于381 - 还需要继续添加一个case2用例—设置条件为
else if true
然后依次添加用例 –>设置检查条
的文字为加载中
等待500毫秒 设置检查条
的文字为验证通过
然后设置移动块动态面板
里面的移动块矩形
的文字为富文本
“这里是一个对号(如下图)
”(这个用到了图标字体FontAwesome可以到官网下载字体) - 最后把
下一步
矩形设置为启用
(默认为禁用) - 继续给它添加用例
拖动结束时
添加条件 元件范围-移动块
-未接触-元件范围-接触点
- 确定后添加动作 移动
移动块
(动态面板)到达
坐标为x: 63 y:57 (这里的位置如果起始位置和我的不一致这里需要有变动)注:这里设置的就是当没有移动到头时,有一个返回去的动效。
到这里我们的这个滑动验证元件就做好了,如果您需要获取源文件请添加下方QQ群。
QQ交流群:483604690 欢迎加群讨论
本文首发于清葡萄博客(原创文章),版权所有,侵权必究。