1.在账户密码输入界面点击登录，进行拼图验证，拖动滑块，上方拼图块随滑块同步移动，拼图失败显示文字提示，滑块及拼图返回初始位置；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
2.拼图验证成功后返回账户密码输入界面，并通过上方文字提示账户密码输入的验证结果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
预览效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
原型预览地址：https://93yr89.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
二、制作交互效果整个交互分成两个部分，分别是拖动拼图以及账户密码输入，我们需要拖入一个动态面板，命名为「content」，调整动态面板大小，创建以上两个状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
1. 制作拖动拼图效果1）交互效果分析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
1.拖动滑块时，上方的拼图块随着滑块滑动而同步滑动，且滑动范围不超过灰色背景条的两端。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
2.拖动结束时，若拼图块对齐缺口，弹出成功提示的弹层并且返回到登录面板中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
3.拖动结束时，若拼图块未对齐缺口，滑块和拼图块返回原来的位置，显示文字提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
元件准备文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
双击拖入的动态面板「content」，选择【滑动验证】状态，按照图示准备好以下元件并进行命名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
元件说明文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
1.「success notice」是拼图成功的提示弹层，底部的矩形可以设置为透明度为70%白色填充，将整个组合置于图片上方，点击右键【设为不可见】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
2.「contact line」为宽度为4px的热区，热区是透明的元件，作为辅助用途，放到缺口的右侧作为拼图块移动时接触的条件；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
3.选中文字「notice」，点击右键，选择【交互样式】，添加【选中】效果时，设置字体颜色为红色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
添加交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22810.html
1.给滑块「slider」添加【拖动时】的交互，分别设置滑块「slider」和拼图块「block」【跟随水平拖动】，点击【