快好知 kuaihz

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

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

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

实现效果:

左右拖动滑块,实时显示当前进度

向左或向右拖动均有边界值,无法拖出边界范围;

实时显示当前的百分比数值。

原理分析:

滑动条效果由固定长度背景+进度可见区域组成

拖动滑动,触发进度可见区域改变,从而显示滑动条效果

利用进度可见区域与背景的比例实时计算当前进度百分比

元件准备:

一张图片,转换为动态面板,表示滑块;

红色背景矩形元件,转换为动态面板,利用动态面板的可见范围,表示进度

灰色背景矩形元件,用于呈现滑块进度对比;

一个文本矩形,默认初始文字“当前百分比:0%”,用于显示当前百分比。

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

整理元件后,最终呈现效果如下:

实现步骤:

整个案例过程,只需对滑块做事件设置,即可完成滑动条效果。

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

下图是移动滑块的事件设置界面,注意是“水平移动”;左边界、右边界值的设置,防止拖动滑动超出范围。

左侧边界值设置如下:

右侧边界值设置如下:

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

最后来一张跟随事件的配置截图。

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:滑动  滑动词条  拖动  拖动词条  进度  进度词条  改变  改变词条  Axure  Axure词条  
原型

 Axure9.0教程:轻松制作图...

今天和大家聊聊如何利用Axure实现图片验证码的随机切换,并且验证对错!首先来分析下需要实现的效果:图片中的验证码为数字和字母的随机组合;点击更换验证码实现验证...(展开)

原型

 Axure中继器运用:选择菜单生...

本文是关于Axure中继器运用,如何选择菜单生成标签,一起来看看~实现功能:输入框聚焦下拉菜单;选择下拉菜单生成相应标签(演示图右边部分);根据选择的菜单内容长...(展开)