Axure RP实例教程:滑块的水平拖动效果
时间:2022-10-24 05:24:43
Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图、流程图、原型和规格的设计制作,从低到高的视觉和交互保真度的全方位构建,是目前业界首屈一指的交互式产品原型设计软件!此次小编就带大家来看看Axure RP如何做滑块的水平拖动效果
1、案例效果:
初始状态:开启功能时:
2、案例描述:
使用系统亮度时,滑块位置与状态条长度不可调节;取消系统亮度的勾选时,滑块与状态条变为蓝色,可以拖动滑块位置改变状态条长度。
元件准备:
页面中:
动态面板“SliderPanel”中:
包含命名:
动态面板(用于拖动调节亮度的滑块):SliderPanel
矩形(用于调节线的背景):BackgroundLine
矩形(用于亮度调节线):BrightnessLine
3、思路分析:
点击使用系统亮度的复选框,复选框切换颜色;(操作步骤1)
复选框被选中时,显示勾选的图标文字;(操作步骤2)
同时,滑块和调节线变为灰色;(操作步骤3)
复选框取消选中时,勾选图标文字消失;(操作步骤4)
同时,滑块和调节线变为蓝色;(操作步骤5)
拖动滑块时,如果滑块是蓝色的状态,则可以水平拖动,但不可超出背景线条的两端;(操作步骤6)
同时,调节线跟随滑块的位置改变尺寸。(操作步骤7)
4、操作步骤:
1、为自制复选框元件的【鼠标单击时】事件添加“用例1”, 设置动作为【切换选中状态】于“当前元件”(This);
2、为自制复选框元件的【选中时】事件添加“用例1”, 设置动作为【设置文本】于“当前元件”(This)为【值】“ ok2”;“ok2 ”为FontAwesome4.4.0图标字体元件库中的对号;
3、继续上一步,添加动作【取消选中】元件“SliderPanel”和“BrightnessLine”;
4、为自制复选框元件的【取消选中时】事件添加“用例1”, 设置动作为【设置文本】于“当前元件”(This)为【值】“”(空值);
5、继续上一步,添加动作【选中】元件“SliderPanel”和“BrightnessLine”;
事件交互设置:
6、为动态面板“SliderPanel”的【拖动时】事件添加“用例1”,设置条件判断【选中状态】于“当前元件”(This)【==】【值】【true】;设置满足条件时的动作为【移动】“当前元件”(This)为【水平拖动】;{界限}设置中,点击【添加边界】,设置【左侧】【>=】“[[b.left]]”,【右侧】【<=】“[[b.right]]”;公式中“b”为局部变量,其内容为元件“BackgroundLine”的对象实例;
7、继续上一步,添加动作【设置尺寸】于元件“BrightnessLine”,{宽度}为“[[This.x-Target.x]]”,{高度}为“1”,【锚点】为默认的【左上角】;公式“[[This.x-Target.x]]”可获取当前元件x轴坐标与目标元件x轴坐标之间距离的长度。
事件交互设置:
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
WPS论文如何添加目录
![](https://img.aspxhome.com/file/2023/8/53518_0s.jpg)
如何利用上升下降箭头标示 excel 两列数据对比大小的结果
![](https://img.aspxhome.com/file/2023/6/a162466_0s.jpg)
AMD正在调查Windows 11 22H2与AMD CPU存在游戏性能问题!
![](https://img.aspxhome.com/file/2023/30/a267987_0s.jpeg)
Mongodb配置文件详解
![](https://img.aspxhome.com/file/2023/7/a328636_0s.png)
Word长文档排版实战!
![](https://img.aspxhome.com/file/2023/0/23980_0s.gif)
电脑qq自动回复怎么设置-电脑qq自动回复设置的方法
![](https://img.aspxhome.com/file/2023/4/a304698_0s.jpg)
如何在Mac上修复问题硬盘
![](https://img.aspxhome.com/file/2023/6/a213406_0s.jpeg)
Excel中统计个数出现的操作方法
黑云一键重装系统的使用方法
![](https://img.aspxhome.com/file/2023/1/a276478_0s.png)
win8系统下为什么u盘不显示的解决方法
![](https://img.aspxhome.com/file/2023/2/a284477_0s.jpg)
下载iOS安装包出现404错误怎么办
QT语音声音小如何解决?QT语音声音小的解决方法
![](https://img.aspxhome.com/file/2023/8/a337245_0s.png)
Vista/Win7 ADSL本地连接上网受限排除方法
![](https://img.aspxhome.com/file/2023/29/a257683_0s.jpg)
Win7系统电脑安装软件显示无权限故障怎么办?
![](https://img.aspxhome.com/file/2023/3/a293234_0s.jpg)
win10 SDK RTM正式版下载 win10 SDK RTM正式版官方下载地址
![](https://img.aspxhome.com/file/2023/28/a248939_0s.png)
如何在Mac电脑中更改账户和个人文件夹的名称?
![](https://img.aspxhome.com/file/2023/6/a202786_0s.jpeg)
Win7设置文件夹密码的方法
![](https://img.aspxhome.com/file/2023/27/a233646_0s.jpg)
win10连不上网提示此计算机缺少一个或多个网络协议怎么办?
![](https://img.aspxhome.com/file/2023/28/a245629_0s.jpg)
Macbook如何开启F1、F2等功能键?
![](https://img.aspxhome.com/file/2023/3/a203133_0s.jpeg)
PPT怎么制作奔跑的骏马? PPT制作奔跑马儿动画的教程
![](https://img.aspxhome.com/file/2023/10/a346052_0s.jpg)