本文将教大家如何用AXURE中的动态面板制作拼图解锁
一、效果
预览地址：https://74wxu6.axshare.com
二、功能
拖动图片到指定位置提示“验证成功”，如果没到指定位置则提示“验证没成功，请重新验证”
三、制作
1、制作拼图
加入底部验证图片一张和底部验证图片部分拼块，底部验证图片部分拼块为隐藏状态，如图：
注：红框部分为底部验证图片部分拼块（图片来源于网络）
2、坐标记录文本矩形
点击动态面板进入，拖入一个矩形命名为1，初始值设置为0，用来记录滑动的X值，如图：
并设置矩形为隐藏状态
3、拖动滑块
拖入一个矩形，大小为50×35，颜色为#0000FF,此矩形为滑块，如图：
4、“验证成功或失败”矩形文本
拖入一个矩形命名为2，设置颜色为#FEA213，大小为8×25，圆角v半径为3，如图：
5、“再滑一次”按钮
拖入一个矩形命名为3，设置大小为74×35,设置文字为"再滑一次"，并设置为隐藏状态，如图：
6、滑块轨迹
拖入一个矩形，设置大小为300×25，为滑块运动轨迹，如图：
所需要的一些所需元件，如图：
最终设计，如图
文章来源：https://www.toymoban.com/news/detail-496557.html
四、交互
1、滑块
滑块移动时设置，如图：
滑块拖动时设置，如图：
滑块拖动结束时设置，如图：
2、矩形3（再滑一次按钮）
鼠标点击时设置如图：
制作完成。
图片内容来源于网络文章来源地址https://www.toymoban.com/news/detail-496557.html
到了这里，关于Axure教程——滑动拼图解锁的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
