拖动滑块解锁进行验证

　　今天来分享下使用Axure制作拖动滑块解锁这个功能的方法，使用淘宝网的例子来还原制作过程。
　　如下图：
　　相信很多人对这个界面都不陌生，这是淘宝网的注册页面，除此之外目前很多网站都有用这种方式来进行验证，当然也有同一种方法不同的表现形式，比如拖动后完成拼图，以防止频繁的非正常请求，进行人机验证。
　　操作描述：
　　拖动滑块时，滑块水平左右运动，不可超出灰色边框；
　　拖动时，绿色的背景随滑块进行移动；
　　拖动达到最右端时，显示白色文字加载中，等待半秒钟后显示白色文字通过验证，并且对勾图标变为绿色，同时获取短信验证码按钮变为可用状态；
　　如果拖动并为达到最右端，滑块则回到初始位置。01：
　　根据该效果图准备以下元件，其他部分元件仿照淘宝注册页面调整就行，我这里就不逐个列出了。
　　02：hr选中动态面板【Slider】，为拖动时添加事件1
　　先添加条件，判断元件范围是【Slider】面板未接触到【Touchpoint】（我的Axure没汉化，重要的地方用红字标注了）
　　设置满足条件的动作：移动【Slider】为水平拖动
　　单击界限后的添加边界，设置在X轴的移动范围为181482，此处范围根据【Touchpoint】元件实际摆放的位置而定。03：
　　如过不满足事件1所设定的条件时，执行动作为：设置文本于元件【Tips】为富文本，然后点击编辑富文本为加载中
　　添加动作等待，时间为：500毫秒。
　　添加动作：设置文本于元件【Tips】为富文本，然后点击编辑富文本为通过验证。
　　继续添加动作设置动态面板状态于动态面板【Slider】为Tick。
　　设置元件【Nextbutton】初始状态为：禁用。
　　注意：【Nextbutton】元件的可用状态是鲜艳的颜色，需要事先设定好，而且需要在属性中设定不可用状态的颜色为灰色。
　　然后继续回元件【Slider】的Case2中，设置动作启用【Nextbutton】。
　　04：hr添加动态面板【Slider】拖动结束时事件case1。
　　为case1添加条件判断，判断元件范围【Slider】未接触元件范围【Touchpoint】。（具体图示可参看上文步骤2）
　　当满足条件时的动作设置为移动动态面板【Slider】到达x171，y227（此处坐标视你操作时【Slider】面板的具体位置而定）。
　　添加动态面板【Slider】移动时事件case1。
　　设置case1动作为移动元件【Greenbox】跟随当前动态面板移动。
　　这样，整个拖动滑块解锁的原型就基本完成了，细节的地方如果需要美化的可自行研究，整个过程的难点主要在于对动态面板移动以及条件判断的运用，对于条件判断不熟悉的同学可以多找些案例尝试练习。
　　另外需要提醒的是，如果尝试模仿别的功能来练习，在开始前一定要弄清楚操作描述并写下来，这对流程的理解和条件判断的设定，以及元件层级的摆放合理性都起到重要的作用，我也会继续分享更多案例给大家一起实操。