Axure制作一个滑动验证组件

　　“滑动验证”

　　此案例里的一些重点如下：

　　1、 动态面板的运用

　　2、 动态面板宽度和内部元件的关系理解

　　3、 动态面板“拖动”交互动作的运用

　　4、 动态获取数值及动态计算的运用

　　5、 添加动作时，组合条件的运用

　　好了，不废话了，进入正题，开始画这个原型了

　　一、准备工作

　　1、拖入矩形

　　画一个验证完成前的背景，300×40(尺寸可根据你的喜好需求自行调整)，输入文字，调整到适合的样式，起个便于识别的名称(背景)

　　2、复制你刚刚画的背景

　　改名为“状态背景”，这个是验证完成后的背景;调整完样式以后，将它转换为动态面板，名称就叫(状态层)

　　3、对齐刚刚的两个原件

　　动态面板背景一定要在你*个背景的上层，然后将动态面板的尺寸调整为40×40

　　4、拖入矩形画操作用的滑块

　　40×40，找两个图标，双箭头和完成以后的对号(此处你可以用官方库的图标)，将图标分别写上名称(双箭头、完成)，图标调整到合适尺寸后与矩形上下左右居中对齐，然后选中完成图标，设置为隐藏;然后将滑块和图标编组后转换为动态面板，写上名称(按住拖动)

　　将刚刚画的“按住拖动”原件对齐到背景的左侧

　　好了，所有图层都画完了，如下;接下来我们添加交互动作。

　　二、交互动作

　　这里，我们所有的交互动作，都添加在“按住拖动”原件上，此处需要仔细越多理解

　　先看下所有动作

　　1、 添加“拖动时”动作

　　【动作1】

　　移动“按住拖动”，水平拖动，动画“无”，添加界限“左侧”大于原件“背景”的x边距，“右侧”小于原件“背景”的x边距加宽度

　　【动作2】

　　设置尺寸“状态层”，宽度“运算公式”原件“This”(当前按住拖动)的x边距 减去 原件“背景”的x边距 + 原件“This”的宽度，高度不变

　　Ok，做完以上动作就可以试一下效果了，已经可以拖动了

　　但是没有完成的效果，不急不急，接着来

　　2、 添加“拖动结束时”动作

　　这里会有两组动作，一组需要输入条件

　　2.1、用例组1，条件如下

　　如果原件“This”的x边距 大于等于 原件“背景”的x边距加宽度减去原件“This”的1.1倍宽度(1.1倍是为了冗余出一些距离，便于手动时触发)则运行

　　【动作1】

　　显示“完成”图标，隐藏“双箭头”图标

　　【动作2】

　　禁用“按住滑动”和“滑块”，验证完毕了，就禁止再操作滑块了

　　【动作3】

　　设置文本“状态背景”为“验证成功”

　　2.2、用例组2

　　不满足用例组1条件时运行

　　【动作1】

　　移动“按住滑动”，回到拖动前位置

　　【动作2】

　　设置尺寸“状态层”，宽度为原件“This”宽度，高度不变

　　三、最终效果

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。