拼图解锁是一种出-现不久的交互办法，在登记或者登录的时刻，乞求用户水平拖动按钮，移动拼图到准确的职位，然后才气够连续下一步，这类办法增强了网站的平安性，预防用户的恶意登记呢。
就连咋们的我们全是成品经-理网站的登记也是采用这一办法，会见注书页面，能够看到以下图所示
拖动拼图到准确职位才气连续下一步，剖析一下这个交互历程
鼠标移动到圆形按钮上，上方展现拼图图片
按下按钮最先向右拖动
如果拼图职位准确对上（赞成一定的误差），则展现通过
如果拼图职位有无对上，展现检查失利，圆形按钮和拼图复位
圆形按钮只会沿水平方向移动，而且只能在滑杆范围内移动呢。
分明，运用Axure也能够或者者完成这类功效，只管咋们有一些时刻本型一开始不需要做得这么着实，但咋们能够从中学习到一些Axure实战办法呢。
今天咋们就来完成这类交互功效，从这个按例里咋们能够学习到以下几点
消息面板的运用所有对-象操做，拖动事情支持
沿水平方向移动设置，移动界限的制约
消息面板拖动事情.拖动结尾事情.鼠标移入/移失事情
函数讲明式的用法，数学函数的运用
条件判断的运用
形状的合并与祛除用法
完结后的功效图以下
一.界面布置
1.水平滑杆
（1）增添一位黑色无际矩形，长宽为300*45，调治圆角为28
（2）增添个圆形，调治长短为54*54，安置到矩形左侧，选中，右键转换为消息面板，命名为button
完结后的功效图以下
2. 图片部-分
咋们运用一位矩形框取代图片，运用多个形状的合并与祛除来变成拼图
（1）在水平滑杆上方增添一位黑色矩形，长短为330*170
（2）增添一位矩形50*50，两个圆形20*20
（3）选择正方形和这个内里一位圆形，在右侧的样式里选择合并操做
（4）连续选择合并后的图片，再选择另一位小圆形，在右侧的样式里选择祛除操做
完结后的图形以下，用他做为拼图
（5）选择这个拼图，命名为src，复制/粘贴一份，命名为dest，做为目的拼图，将src顺着纪律设置为最顶层，这样移动以前时能够笼罩dest，为了模拟缺失功效，设置他的有内阴影功效
（6）移动两个拼图到指定职位
将第一位拼图移动到和滑杆上的圆形按钮最先职位一样的场所，第两个拼图维持和第一位拼图的高度职位一样即可，将两个拼图和矩形选中，转成消息面板，命名为image，右键设置为潜伏呢。
增添个文本标签，命名为tips，展现现在拖动状态呢。
现在的界面布置以下
两.事情处置
1.鼠标移入移失事情
鼠标通过圆形按钮时展现上方消息面板image，鼠标移出时潜伏image
2. 增添拖动事情
拖动按钮时，只沿水平方向移动按钮，并制约移动的界限
选中圆形按钮消息面板
增添拖动时势情
增添移动动做
选择现在元件（圆形按钮消息面板）
移动办法为“水平拖动啊”
增添界约，左侧>=20，右侧<=300
同理选择拼图src，设置一样的操做，这样保证了拖动按钮时的同步移动呢。
设置提醒信息tips内容为“拖动中…啊”
3. 增添拖动结尾事情
在拖动按钮到右侧松开鼠标前，判断现在按钮和拼图src之中的差异差，如果在一定范围内（这里是误差在10之内）则以为拼图准确，否则表现有无拼上
选择按钮
增添拖动事情
增添条件判断
通过讲明式盘算
LVAR1表现拼图src，LVAR2表现拼图2
两个拼图的左侧职位差的相对值
相对值小于即是10时
设置笔墨提醒为“检查通过啊”，并移动按钮和src拼图的左侧职位和dest左侧职位一样
(1)(2)移动现在元件（圆形按钮）和src
(3)通过讲明式盘算职位
(4)部-分变量LVAR1表现目的拼图dest
(5)设置为[[LVAR1.left]]，即维持和目的拼图左侧职位一样
在拼图有无对上时，复位圆形按钮和src拼图到本始职位，即设置拖动结尾时的另一位事情份支
增添事情份支（双击“拖动结尾时啊”事情）
先设置提醒笔墨内容为“检查失利啊”
期待500毫秒
移动元件
移动现在元件（圆形按钮）和拼图src
移动“回到拖动前职位啊”，增添线性动画功效，时长100毫秒
4. 消息面板载入事情
思考到每一次目的拼图dest的职位应该随机的，咋们界说一位全局变量start，然后设置一位随机值，再将dest的x职位移动到这个随机的职位，到达dest初始职位随机的功效
界说全局变量
消息面板载入事情
选择消息面板
增添载入时势情
设置全局变量
选择全局变量start
设置值=[[Math.random()*190+60]]，即初始职位为60~250之中
移动目的拼图dest到(start,50)职位，y方向职位不变
三.F5预览
到里能够预览了，按下F5键，鼠标移动到圆形按钮上，上方展现拼图，拖动按钮最先拼图
拼图对上后，展现检查通过提醒呢。
由于内容较多，如果有无到达功效，请仔细搜查每一步的操做哦！
所有按例以前完结，到这里去下载源文件吧
本文由 @Axure本型计划工厂 本创公布于我们全是成品经-理呢。未经允许，不行以转载呢。
发表评论