Axure RP实例教程：滑块的水平拖动效果

Axure RP 9 Mac这款原型设计软件能让设计者快速建立应用软件，或者在web网站的线框图、流程图、原型和规格的设计制做，从低到高的视觉和交互保真度的全方位构建，是目前业界数一数二的交互式产品原型设计软件！这次小编就带你们来看看Axure RP如何作滑块的水平拖动效果

一、案例效果：

初始状态：

开启功能时：

二、案例描述：

使用系统亮度时，滑块位置与状态条长度不可调节；取消系统亮度的勾选时，滑块与状态条变为蓝色，能够拖动滑块位置改变状态条长度。

元件准备：

页面中：

动态面板“SliderPanel”中：

包含命名：

动态面板（用于拖动调节亮度的滑块）：SliderPanel

矩形（用于调节线的背景）：BackgroundLine

矩形（用于亮度调节线）：BrightnessLine

三、思路分析：

点击使用系统亮度的复选框，复选框切换颜色；（操做步骤1）

复选框被选中时，显示勾选的图标文字；（操做步骤2）

同时，滑块和调节线变为灰色；（操做步骤3）

复选框取消选中时，勾选图标文字消失；（操做步骤4）

同时，滑块和调节线变为蓝色；（操做步骤5）

拖动滑块时，若是滑块是蓝色的状态，则能够水平拖动，但不可超出背景线条的两端；（操做步骤6）

同时，调节线跟随滑块的位置改变尺寸。（操做步骤7）

四、操做步骤：

一、为自制复选框元件的【鼠标单击时】事件添加“用例1”， 设置动做为【切换选中状态】于“当前元件”（This）；

二、为自制复选框元件的【选中时】事件添加“用例1”， 设置动做为【设置文本】于“当前元件”（This）为【值】“ ok2”；“ok2 ”为FontAwesome4.4.0图标字体元件库中的对号；

三、继续上一步，添加动做【取消选中】元件“SliderPanel”和“BrightnessLine”；

四、为自制复选框元件的【取消选中时】事件添加“用例1”， 设置动做为【设置文本】于“当前元件”（This）为【值】“”（空值）；

五、继续上一步，添加动做【选中】元件“SliderPanel”和“BrightnessLine”；

事件交互设置：

六、为动态面板“SliderPanel”的【拖动时】事件添加“用例1”，设置条件判断【选中状态】于“当前元件”（This）【==】【值】【true】；设置知足条件时的动做为【移动】“当前元件”（This）为【水平拖动】；{界限}设置中，点击【添加边界】，设置【左侧】【>=】“[[b.left]]”，【右侧】【<=】“[[b.right]]”；公式中“b”为局部变量，其内容为元件“BackgroundLine”的对象实例；

七、继续上一步，添加动做【设置尺寸】于元件“BrightnessLine”，{宽度}为“[[This.x-Target.x]]”，{高度}为“1”，【锚点】为默认的【左上角】；公式“[[This.x-Target.x]]”可获取当前元件x轴坐标与目标元件x轴坐标之间距离的长度。

事件交互设置：

以上就是小编为你们带来的Axure RP实例教程：滑块的水平拖动效果。还有更多详细、实用的功能以及相关软件Axure RP 9Mac版获取，你们快来Macdown.com自行探索一番吧。