Axure实现注册滑动验证

我们先来预览一下效果

下面我们开始做一下这个效果

第一步 准备元件

1. 在面板当中拖入一个矩形，设置 w:300 h:35 我们给他取名为 垫底的矩形
2. 拖入一个热区 设置 w：10 h：35 备用（命名为接触点）
3. 拖入一个和垫底的矩形一样的矩形，设置背景颜色为红色然后转换成动态面板（命名为背景颜色面板）
4. 拖入一个矩形 设置 w：40 h：35转换为动态面板（命名为移动块）
5. 拖入一个和垫底的矩形一样的矩形，输入文字“请按住 滑块，拖动到最右边” （命名检查条）
6. 拖入一个矩形 设置 w:180 h:35 设置为禁用 (命名下一步)

第二步 摆放元件

1. 将垫底的矩形放到面板中 我放的坐标是 x:63 y:57（这个用到绝对位置，如果位置摆放和我的这个不一样的话,后面用到的绝对位置也要做相对的调整）
2. 将刚才拖入的热区（接触点）放到垫底的矩形右侧紧挨着。
3. 把检查条放到垫底的矩形上面完全覆盖
4. 进入背景颜色面板-把状态1中的矩形坐标设置为 x:-300 y:35
5. 设置好之后把它放到检查条上面完全覆盖
6. 将移动块放到背景颜色面板上方和头部对齐

第三步 添加用例

1. 设置移动块 动态面板-移动时-选择红色进度条矩形-移动方式选择为-跟随
2. 拖动时-添加条件—选择“元件范围-移动块-未接触-元件范围-接触点”设置好点击确定
3. 在这个条件下 添加动作移动选择元件移动块设置为水平拖动 添加界限左侧大于等于80 右侧小于等于381
4. 还需要继续添加一个case2用例—设置条件为else if true然后依次添加用例 –>设置检查条的文字为加载中等待500毫秒 设置检查条的文字为验证通过然后设置移动块动态面板里面的移动块矩形的文字为富文本“这里是一个对号（如下图）”（这个用到了图标字体FontAwesome可以到官网下载字体）
   
5. 最后把下一步矩形设置为启用（默认为禁用）
6. 继续给它添加用例 拖动结束时 添加条件 元件范围-移动块-未接触-元件范围-接触点
7. 确定后添加动作 移动移动块（动态面板）到达坐标为x: 63 y:57 （这里的位置如果起始位置和我的不一致这里需要有变动）注：这里设置的就是当没有移动到头时，有一个返回去的动效。

到这里我们的这个滑动验证元件就做好了，如果您需要获取源文件请添加下方QQ群。

QQ交流群：483604690 欢迎加群讨论

本文首发于清葡萄博客（原创文章），版权所有，侵权必究。