美文网首页产品经理
Axure 滑动条交互实现教程

Axure 滑动条交互实现教程

作者: 初糖 | 来源:发表于2019-12-06 14:06 被阅读0次

滑动条:通过水平移动滑块或滑杆来控制某种变量。主要用来调节音量、屏幕亮度和修改数值。也用来滑动解锁和滑动登录。

下面分享一下用Axure制作实现滑动条。

 元件准备   

1滑块:位置坐标(0,0); 椭圆大小:20*20 ; 填充颜色:#ffffff; 描边颜色:3198FF;

2滑动数:位置坐标(586,3); 字体大小:14 ; 字体颜色:#3198FF;

3背景:位置坐标(0,7); 矩形大小:574*6 ; 填充颜色:# E4E7ED; 圆角半径:3;

4进度条:位置坐标(0,7); 形状大小:20*6 ; 填充颜色:#3198FF; 圆角半径:3;

设置好基本参数后,全部选中转换为动态面板 。

原理分析   

实现原理把所有原件全部选中后转换成动态面板【滑动条】后,蓝色圆角矩形成为【进度条】默认面板内的一个元件。通过把【进度条】的初始宽度设置为椭圆大小20,被位于上层的【滑块】遮挡,使整个进度槽看起来是空的。随着滑块不断拖动,使【进度条】宽度不断变大,蓝色矩形被显示出来的区域增多,直至当【进度条】的宽度等于【背景】的时候,蓝色矩形就全部被显示出来了,使整个进度槽看起来被填充完成。期间【进度条】和【滑动数】是关联进行的,根据【进度条】的宽度计算出【滑动数】的数值,用于表示当前的进度情况。

逻辑流程

1. 移动【滑块】,移动方式设置成“水平拖动”,必须添加界限,否则滑块会无限制拖动。

2. 设置左侧边界的X轴坐标大于等于(【背景】的横坐标)

3. 右侧边界的X轴坐标小于等于(【背景】的宽度+【背景】的横坐标)

4. 设置【进度条】高度为【进度条】的初始高度6

5. 设置【进度条】宽度等于(【滑块】的横坐标+【进度条】的初始宽度)

6. 设置【滑动数】的大小等于(【滑动条的宽度】-20)/(【背景的宽度】-20)

转换成原型中的函数为:

[[Math.ceil((LVAR1.width-20)/(LVAR2.width-20)*100)]]%

设置用例

原型演示地址:https://b9el2o.axshare.com

下载链接:https://pan.baidu.com/s/1zaHurZkjfAdYBwNKBfPnLw  

密码:h1kc

参考函数

math.ceil(x):向上取整函数,返回大于或等于参数x,并且与之最接近的整数。math.ceil(1.2)=2;math.floor(x):向下取整函数,返回小于或等于参数x,并且与之最接近的整数。math.floor(1.2)=1。

相关文章

网友评论

    本文标题:Axure 滑动条交互实现教程

    本文链接:https://www.haomeiwen.com/subject/nwfegctx.html