本文作者:电脑知识教程网

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

电脑知识教程网 2024-03-27 10:04:47
后台-系统设置-扩展变量-手机广告位-内容正文顶部
摘要:

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

1、案例效果:
初始状态:开启功能时:2、案例描述:

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

元件准备:

页面中:

动态面板“SliderPanel”中:


包含命名:
动态面板(用于拖动调节亮度的滑块):SliderPanel
矩形(用于调节线的背景):BackgroundLine
矩形(用于亮度调节线):BrightnessLine

3、思路分析:

点击使用系统亮度的复选框,复选框切换颜色;(操作步骤1)
复选框被选中时,显示勾选的图标文字;(操作步骤2)
同时,滑块和调节线变为灰色;(操作步骤3)
复选框取消选中时,勾选图标文字消失;(操作步骤4)
同时,滑块和调节线变为蓝色;(操作步骤5)
拖动滑块时,如果滑块是蓝色的状态,则可以水平拖动,但不可超出背景线条的两端;(操作步骤6)
同时,调节线跟随滑块的位置改变尺寸。(操作步骤7)

Sketch进阶教程-图标绘制(二)

Sketch Mac是一款为设计师量身定做的优美界面和强大工具兼有的专业绘图工具。能够满足网页、用户界面、图标等的设计需求。

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轴坐标之间距离的长度。

事件交互设置:

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

Mac谷歌浏览器“无法添加来自此网站的应用、扩展程序和应用脚本”解决方案

在给mac上的谷歌浏览器添加插件的时候一直安装不成功,像下面这个样子,提示“无法添加来自此网站的应用、扩展程序和应用脚本查询得知,谷歌浏览器从最新的版本开始默认只允许从谷歌商店下载安装扩展程序。

后台-系统设置-扩展变量-手机广告位-内容正文底部
未经允许不得转载:

作者:电脑知识教程网,原文地址:Axure RP实例教程:滑块的水平拖动效果发布于2024-03-27 10:04:47
转载或复制请以超链接形式并注明出处 演示站

分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

留言与评论(共有 0 条评论)
   
验证码: