AxureRP8实战手册-案例14（动态面板：拖动滑块解锁①）
案例14. 动态面板：拖动滑块解锁（1）
案例来源:
淘宝-注册界面
案例效果：
- 拖动前：（图1-97）
- 拖动中：（图1-98）
- 拖动到终点后：（图1-99）
案例描述：
拖动滑块进行解锁验证。包含以下情形：
- 拖动滑块时，滑块仅允许水平拖动，且不可超出灰色边框两端；
- 拖动滑块时，有绿色的背景随滑块移动；
- 拖动滑块时，如果滑块到达最右端，显示白色文字“加载中”，等待半秒钟后显示白色文字“验证通过”，并且滑块上的图标变为绿色对勾；同时，启用“获取短信验证码”的按钮；
- 拖动结束时，如果滑块未到达最右端，滑块回到拖动前的位置。
元件准备：
- 页面中：（图1-100）
- 动态面板“SliderPanel”中：（图1-101）
- 动态面板“BackgroundPanel”中：（图102）
包含命名：
- 动态面板（用于拖动）：SliderPanel
- 动态面板（用于显示绿色背景条）：BackgroundPanel
- 矩形（用于滑块形状）：SliderShape
- 矩形（用于绿色背景）：GreenShape
- 矩形（显示验证提示）：CheckTip
- 矩形（用于下一步按钮）：NextButton
- 热区（用于验证触点）：Contact
思路分析：
1、本案例比较复杂的就是在同一区域的元件叠放，由最底层开始分别是：
- 灰色矩形，作为模块的背景；
- 动态面板“BackgroundPanel”，绿色矩形“GreenShape”在这个面板的状态中；这两个元件用于呈现绿背景，所以仅在灰色背景之上；
- 透明矩形“CheckTip”，用于显示验证提示；
- 动态面板“SliderPanel”，矩形滑块“SliderShape”；因为元件中只有动态面板才可拖动，所以要将矩形滑块置于其中；
- 热区“Contact”，在整个模块右侧边缘，用于滑块触碰到此元件时，触发验证相关动作。
2、在滑块被拖动时，如果没有触碰到触点元件“Contact”，需要设置滑块为水平拖动，并添加边界限制；（操作步骤1~2）
3、否则（触碰到触点元件“Contact”），需要设置动作：
- 设置元件“CheckTip”的元件文字为“加载中”；（操作步骤3）
- 等待500毫秒；（操作步骤4）
- 设置元件“CheckTip”的元件文字为“验证通过”；（操作步骤5）
- 设置元件“SliderShape”的元件文字为“ ”；（操作步骤6）
- 启用元件“NextButton”。（操作步骤7）
4、滑块拖动结束时，如果没有触碰到触点元件“Contact”，需要设置滑块回到初始位置；（操作步骤8）
5、滑块移动时，设置绿色的背景跟随移动。（操作步骤9）
操作步骤：
1、点中动态面板“SliderPanel”，为其【拖动时】事件添加“用例1”，用例中添加条件，判断【元件范围】“SliderPanel”【未接触】【元件范围】“Contact”；
- 条件判断设置：（图1-103）
2、设置满足条件的动作为【移动】“SliderPanel”为【水平拖动】；点击{界限}后方的【添加边界】，设置元件在x轴“80”~“381”的坐标区域内移动；“381”为模块右边界加1的位置，此位置才能够接触到触点元件“Contact”。
- 用例动作设置：（图1-104）
3、添加不满足操作步骤1的条件时，执行的动作为【设置文本】“CheckTip”的元件文字为【富文本】，然后点击【编辑文本】，为元件上显示的文字“加载中”添加样式；
- 用例动作设置：（图1-105）
- 编辑文本设置：（图1-106）
4、添加动作【等待】，{等待时间}“500”毫秒；然后，后执行下一动作；
- 用例动作设置：（图1-107）
5、添加动作【设置文本】“CheckTip”的元件文字为【富文本】，然后点击【编辑文本】，为元件上显示的文字“通过验证”添加样式（参考图1-106）；
- 用例动作设置：（图1-108）
6、添加动作【设置文本】“SliderShape”的元件文字为【富文本】，然后点击【编辑文本】，为元件添加图标字体“ ”；图标字体可通过双击图标字体元件，在编辑状态下复制获得；
- 用例动作设置：（图1-109）
- 编辑文本设置：（图1-110）
7、在元件“NextButton”属性中为元件添加【禁用】状态的交互样式，并勾选默认的【禁用】选项；然后，继续上一步，添加动作【启用】元件“NextButton”；
- 用例动作设置：（图1-111）
8、为动态面板“SliderPanel”的【拖动结束时】事件添加“用例1”，用例中添加条件，判断【元件范围】“SliderPanel”【未接触】【元件范围】“Contact” （参考操作步骤1）；设置满足条件时的动作为【移动】动态面板“SliderPanel”【到达】{x}“80”{y}“180”的位置；
- 用例动作设置：（图1-112）
9、为动态面板“SliderPanel”的【移动时】事件添加“用例1”；设置动作为【移动】元件“GreenShape”【跟随】当前动态面板移动；
- 用例动作设置：（图1-113）
通过以上步骤，就完成了拖动解锁的全部交互。
- 事件交互设置：（图1-114）
补充说明：
- 本案例主要讲解动态面板拖动的相关内容，不对其它交互进行描述；
- 本案例中滑块回到原点未添加滑动效果，该效果将在函数案例部分优化；
- 本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。（参考案例1的补充说明）
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。