Axure | 滑动条:拖动滑块改变进度

生活中经常遇到需要平滑改变一个值的应用场景。比如听音?#20540;?#36807;程中,调节音量,又比如游戏竞猜过程中,调节竞猜数量等,这种场景最适合使用滑动条。作者将通过这篇案列分享,教大家使用Axure制作实现“滑动条:拖动滑块改变进度”。


生活中经常遇到需要平滑改变一个值的应用场景。比如听音?#20540;?#36807;程中,调节音量,又比如游戏竞猜过程中,调节竞猜数量等,这种场景最适合使用滑动条。作者将通过这篇案列分享,教大家使用Axure制作实现“滑动条:拖动滑块改变进度”。

Axure | 滑动条:拖动滑块改变进度

演示地址:滑动条:拖动滑块改变进度

实?#20013;?#26524;:

Axure | 滑动条:拖动滑块改变进度

  1. 左右拖动滑块,实时显示当前进度;
  2. 向左或向右拖动均有边界值,无法拖出边界范围;
  3. 实时显示当前的百分比数值。

原理分析:

  1. 滑动条效果由固定长度背景+进度可见区域组成
  2. 拖动滑动,触发进度可见区域改变,从而显示滑动条效果
  3. 利用进度可见区域与背景的比例实时计算当前进度百分比

元件准备:

Axure | 滑动条:拖动滑块改变进度

  1. 一张?#35745;?#36716;换为动态面板,表示滑块;
  2. 红色背景矩形元件,转换为动态面板,利用动态面板的可见范围,表示进度;
  3. 灰色背景矩形元件,用于呈现滑块进度对比;
  4. 一个文本矩形,默认初始文字“当前百分比:0%”,用于显示当前百分比。

将进度面板里面的红色背景矩形向左移动,使矩形的右边界为0,此案例矩形宽度为300,所有向左移动300。

Axure | 滑动条:拖动滑块改变进度

整理元件后,最终呈?#20013;?#26524;如下:

Axure | 滑动条:拖动滑块改变进度

实现步骤:

整个案例过程,只需对滑块做?#24405;?#35774;置,即可完成滑动条效果。

拖动滑块时,水平移动滑块,同时设置文字改变;滑块在移动的过程中,设置进度面板里面的红色背景元件跟随滑块移动。

Axure | 滑动条:拖动滑块改变进度

下图是移动滑块的?#24405;?#35774;?#23186;?#38754;,注意是“水平移动”;左边界、右边界值的设置,?#20048;?#25302;动滑动超出范围。

Axure | 滑动条:拖动滑块改变进度

左侧边界值设置如下:

Axure | 滑动条:拖动滑块改变进度

?#20063;?#36793;界值设置如下:

Axure | 滑动条:拖动滑块改变进度

我们在拖动滑块时,设置文本描述元件的值,实时显示当前滑动100%进度。

Axure | 滑动条:拖动滑块改变进度

最后来一张跟随?#24405;?#30340;配?#23186;?#22270;。

Axure | 滑动条:拖动滑块改变进度

?#26223;?#20363;已完成,点击查看上一篇案例《Axure版跳一跳如何制作?》

 

本文由 @十月大神 原创发布,未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

原创文章,作者:金香槟运营,如若转载,请注明出处:http://www.ptffy.club/66821.html

征服者入侵APP下载
广西十一选五 急速赛车 天津快乐十分 股票涨跌排行榜 安徽快三 上证指数000001新浪财经 新闻 河北十一选五 广东快乐十分 山西11选5 娃哈哈集团股票代码 宁夏11选5 股票融资最高几倍杠杆 山西十一选五 期如意期货配资公司 广东快乐10分 百发理财平台