Axure制作横向滑块的显示进度条

Axure制作横向滑块的显示进度条

本文将给大家分享一下使用Axure制作横向滑块的显示进度条的教程,关于进度条有很多种, 圆形,百分比等,明白其中远离就比较容易实现。

构成元件就三个。

1、一个背景(矩形,宽600,高30,圆角半径15)命名为beijing.

2、一个进度条(复制背景,设置背景颜色为蓝色,宽度设置为30)命名为jindu。

3、一个圆形。将圆形转换成动态面板。命名为yuanquan.

Axure元件命名

为了方便理解,进度条是靠着Y轴的,这样可以少考虑一个参数。

拖动圆形(动态面板)的时候,添加三个交互:

1、移动当前元件,水平拖动。设置拖动边界,左侧大于等于0,右侧小于等于背景的长度。

这一步是让这个圆圈在背景条上可以拖动起来。

2、设置进度条的尺寸,宽度为:[[yuanquan.x+yuanquan.width]],注意要添加局部变量yuanquan指的是动态面板圆圈。锚点在左侧。

这一步是让进度条跟着动起来。

3.设置圆形上的元件文字=[[Math.floor((jindu.width-30)*100/570)]],注意添加局部变量。

这个是设置圆形上的文字。公式计算的是当前位置的百分比。由于本身有30宽,所以计算百分比的时候分子分母都需要减去30。不然就不是从零开始的了。Math.floor()是向下取整,也就是把小数点后面的数字抹掉。

Axure拖动时

这样就做完了,新手要注意一下三个元件的层级顺序,圆圈在最上面,进度在中间,背景在最底下。在概要面板里面可以拖动调整元件的层级。

以上内容就是Axure制作横向滑块的显示进度条的教程,更多感兴趣的教程,点击文章:Axure制作动态的钟表

1 comment so far

Axure使用动态面板实现进度条加载效果 | Axure 中文网Posted on9:42 上午 - 1月 15, 2019

[…] 相对来说是一个比较简单的效果实现,利用其中原理实现多种加载条的实现,以上就是全部步骤了,希望对你有帮助,更多感兴趣的教程,点击文章:Axure制作横向滑块的显示进度条。 […]

在线客服
客服邮箱
客服电话
17051276424