实现跟随拖动的拼图
一些网站为了验证用户的行为，使用手动拼图的方式。今天我们来介绍一种实现这样效果的控件。
步骤一：创建拼图组件
首先新建一个拼图图片、箭头和两个矩形。设置其中一个矩形的尺寸为48*48，填充色为#C6E6E8，取消边线显示，并将其放置在箭头图标与矩形正中间。然后选中箭头图片和该矩形，转化为动态面板，并命名为“拉杆”。
步骤二：设置滑块标签
接下来创建一个尺寸为320*50的矩形，命名为“lable”，并设置内容为“向右滑动滑块填充拼图”。将“动态面板：拉杆”置于“lable”的左边，并按以下布局组合各控件。
步骤三：添加拖动交互动作
在“动态面板：拉杆”的拖动时交互动作中，设置以下动作：
1. 移动“动态面板：栏杆”，移动方式为水平拖动，并设置范围。
2. 将“元件：lable”设为局部变量LVAR1，使“动态面板：栏杆”右侧小于LVAR1.right。
3. 将“元件：lable”设为局部变量LVAR1，使“动态面板：栏杆”左侧大于LVAR1.x。
步骤四：添加移动交互动作
在“动态面板：拉杆”的移动时交互动作中，设置以下动作：
1. 当“动态面板：拉杆”移动时，图片跟随移动。
步骤五：添加鼠标松开交互动作
在“动态面板：拉杆”的鼠标松开时交互动作中，设置以下动作：
1. 等待1500毫秒，将“动态面板：拉杆”移动到初始位置。
2. 将“元件：lable”设为局部变量LVAR1，使“动态面板：栏杆”的X值为LVAR1.x。
3. 将“动态面板：栏杆”的Y值设为this.y。
4. 等待100毫秒，将“矩形：lable”的内容值设为“向右滑动滑块填充拼图”。
效果展示与完善
至此，我们已经完成了拖动拼图的交互动作。现在可以先预览一下效果，确保一切正常。稍后，我们可以进一步完善验证功能。敬请期待！
投票与点赞
如果您觉得这篇文章有帮助，请给我们投个票并加个赞吧！
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
