滑动条：通过水平移动滑块或滑杆来控制某种变量。主要用来调节音量、屏幕亮度和修改数值。也用来滑动解锁和滑动登录。
下面分享一下用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。
网友评论