Axure7.0实现动态“极验”效果（滑动验证）

其实我写这个文章的目的第一是为了强化自己的刚刚学习的技能，另一方面也是希望能得到大神们的指教（又一句废话）。

“验证码”是一种很常见的东西，在很多网站的登录、注册、下单等业务操作时都会用到验证码。当然，验证码的形式也随着互联网、信息化的发展而变得多样起来，从最初的输入图中的文字到运算图中的数字再到最近坑的很火的123XX看图找物，样式层出不穷的验证码已经成为一个网站别样的“风景”，当然对于某一类的验证码大家的评价也是褒贬不一。

我今天要跟大家分享的这一类验证码是本人认为见过的最好的一种，这个东东叫“极验”老实说我第一次看到这个效果是在哪里实在记不得了，但是印象最深的一次是在“人人都是产品经理”网站的注册页面（我不是网站的托），刚开始只是觉得这个效果不错就去网上查了一下才知道这种验证码叫“极验”，简单的说就是通过拼凑一张美图的某一块来完成验证，说的高大上一点叫动态行为验证。

我个人喜欢它的一条很重要的原因就是他的安全性很高（问过我们开发的高手），而且在网站趋近与扁平化效果的年代，“极验”的验证方式很好的融入了扁平化的风格，简单的操作完成复杂的安全验证业务，符合大众化操作风格，提高用户的体验度。当然有好处就一定也有弊端，这样的控件想必会存在兼容性的问题，当然在加载页面的时候也会影响一定的效率，对于登录区域设计偏小的网站这样的验证方式会占据一定的空间。

现在我就跟大家说一下如何用Axure实现这种“极验”的效果，首先跟大家说一下本人是用Axure7.0版本实现的效果，对于实现这种“极验”的效果本人认为有三大难点需要攻破。

第一，实现下面按钮和上面拼图的联动；

第二，实现拼图到对应位置的验证事件；

第三，保证拼图和按钮移动的范围不能超出可移动区域。

在介绍的过程之中我会跟大家说明本人是如何克服这三个难点的。

首先要做的就是准备素材，说白了就是盗图，你需要准备三张半图片，第一张是下面滑动的按钮；第二张是按钮的滑动区域；第三张是拼图的完整图片；当然另外的半张就是你从第三张图截下来那一部分的拼图了。

素材准备完毕后，先来实现拼图和按钮在水平方向联动的效果，将按钮和拼图块放到指定的位置上，并且将其设置成两个动态面板（为啥不设置一个，因为最终要拖动的只是下面的按钮，如果设置成一个动态面板那么最终能拖动的区域就不止按钮一个区域了！）

为了保证两个面板的联动效果好一些，在创建面板时尽量保证两个面板的宽度是一致的。

创建完两个面板之后现在需要做的是设置“联动事件”，选“按钮面板”选中“拖动动态面板时”这个事件（感觉axure7.0里面的事件增加了很多）并且在新增动作里选择“移动”这个动作，在移动这个动作里选择“拼图面板”和“按钮面板”，并且在配置动作中选择“沿X轴移动”（因为是平移拼图的效果），这样就把两个面板联动的效果设置完成了。

联动效果设置完成之后接下来是要设置实现区域验证效果的事件。

由于Axure这个软件并没有通过控件坐标来判断触发的条件，因此我通过给自己定一个“边界”的方法来实现验证，其实就是在拼图的“验证区域”左右各加了一条线作为边界，再通过动态面板与两条线接触作为判断条件来实现“校验”的效果，最后再把边界线的颜色设置成与背景同色即可。

这个方法需要注意的一点就是一定要保证“拼图面板”的宽度一定要等于两条“边界线”间的距离或者略微大一点也可以，因为要保证在拖动结束的时候面板能同时接触到两条“边界线”。