本文详细介绍了如何用Axure制作拼图样式的拖动解锁效果，有需要的小伙伴赶紧学习起来~
用Axure制作拼图样式的拖动解锁的效果：
- 拉动按钮直线运动在一定范围内；
- 拼图跟随按钮直线运动在一定范围内；
- 按钮停下来，如果拼图位置跟阴影位置的误差在一定范围内；
- 点击登录按钮跳转到登录成功页面。
一、元件布局
先用图片处理软件制作了三片拼图，两个小拼图是一样大的，大小拼图两者是能合一的，其他的图标从网上下载，图形可用Axure制作。
记录下滚动条的宽度和位置，这是按钮和拼图移动的范围，按钮元件设置为动态画板
二、添加事件
1. 按钮沿直线在一定范围内移动
选中动态面板添加拖动时事件，添加移动动作
2. 拼图跟随沿直线在一定范围内移动 ——同按钮，直接添加动作即可
3. 按钮停下来，如果拼图位置跟阴影位置的误差在一定范围内（技术小白在这卡了很久）
添加事件拖动结束时，添加情形（条件），设置拼图和拼图阴影直接距离绝对值大于等于10，添加动作，这个条件下将产生什么动作
重点是第2步，设置变量和函数。
设置局部变量拼图和拼图阴影，用函数math.abs计算两个图形左侧距离的绝对值，当大于10时，按钮退回原处（可以设具体的位置）。
4. 点击登录按钮跳转到登录成功页面
总结一下：做这个效果的难点在于增加了变量和函数在里面，同时两个判断条件所产生的位置不同，一个是按钮界面一个是登陆界面。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。