生活中经常遇到需要平滑改变一个值的应用场景。比如听音乐的过程中,调节音量,又比如游戏竞猜过程中,调节竞猜数量等,这种场景最适合使用滑动条。作者将通过这篇案列分享,教大家使用Axure制作实现“滑动条:拖动滑块改变进度”。
![7fe826ecefd552eaf28dc1abd8198fbc.png](https://i-blog.csdnimg.cn/blog_migrate/069f7e2e55f72514559dc311168c10a4.jpeg)
实现效果:
![ecb89c7b80b60813a474b75dbbd82d11.gif](https://i-blog.csdnimg.cn/blog_migrate/d5ee689bde1cdbb885baf5e879a29bca.gif)
- 左右拖动滑块,实时显示当前进度;
- 向左或向右拖动均有边界值,无法拖出边界范围;
- 实时显示当前的百分比数值。
原理分析:
- 滑动条效果由固定长度背景+进度可见区域组成
- 拖动滑动,触发进度可见区域改变,从而显示滑动条效果
- 利用进度可见区域与背景的比例实时计算当前进度百分比
元件准备:
![15505d758ac59b82aa3ebfa8fa600f93.png](https://i-blog.csdnimg.cn/blog_migrate/a8b576c31754bed7b2b828db2159d741.jpeg)
- 一张图片,转换为动态面板,表示滑块;
- 红色背景矩形元件,转换为动态面板,利用动态面板的可见范围,表示进度;
- 灰色背景矩形元件,用于呈现滑块进度对比;
- 一个文本矩形,默认初始文字“当前百分比:0%”,用于显示当前百分比。
将进度面板里面的红色背景矩形向左移动,使矩形的右边界为0,此案例矩形宽度为300,所有向左移动300。
![ebb714bf5a1fef24fff82368fb5657b3.png](https://i-blog.csdnimg.cn/blog_migrate/60354087433c900c8cee0a7e57be0ac9.jpeg)
整理元件后,最终呈现效果如下:
![7f9aadbd74c5af9be2a55450bf0d132d.png](https://i-blog.csdnimg.cn/blog_migrate/ff43ae62d8855671eefb8ffa371ed5a3.jpeg)
实现步骤:
整个案例过程,只需对滑块做事件设置,即可完成滑动条效果。
拖动滑块时,水平移动滑块,同时设置文字改变;滑块在移动的过程中,设置进度面板里面的红色背景元件跟随滑块移动。
![f7766268eca757abee98abba4589a82f.png](https://i-blog.csdnimg.cn/blog_migrate/7d3a08b257a2a229a0e5cc35ced48211.jpeg)
下图是移动滑块的事件设置界面,注意是“水平移动”;左边界、右边界值的设置,防止拖动滑动超出范围。
![273c726fae4cf946118492fb1b091256.png](https://i-blog.csdnimg.cn/blog_migrate/1b2b9949fb890761ef83f4f651a85112.jpeg)
左侧边界值设置如下:
![67504e62fc9aac96a2953ea98cc335c1.png](https://i-blog.csdnimg.cn/blog_migrate/d6cc5eec66126a07333bdf368feaace5.jpeg)
右侧边界值设置如下:
![a76df88939a927940964ae3990b96b59.png](https://i-blog.csdnimg.cn/blog_migrate/5f77f979b0aca7fe74111f3bc9de2d97.jpeg)
我们在拖动滑块时,设置文本描述元件的值,实时显示当前滑动100%进度。
![76636fe6639281a5b3e7afb7bd1c6fa6.png](https://i-blog.csdnimg.cn/blog_migrate/71420e2121bacb655c9f7e5c54b7f46e.jpeg)
最后来一张跟随事件的配置截图。
![e92dbc126e72d3ee84521d53c1dc0115.png](https://i-blog.csdnimg.cn/blog_migrate/2725ff0e5ccab404201335cf7bed7854.jpeg)
本案例已完成,点击查看上一篇案例《Axure版跳一跳如何制作?》
本文由 @十月大神 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Unsplash,基于CC0协议。