Axure实现超级简单的进度条制作

Axure实现超级简单的进度条制作

今天给大家分享一个超级简单的进度条制作,关于进度条有很多样式,有圆形的、花样的,今天这个比较基础,以长方形实现100%进度。

进度条:会增长的矩形条,文中的『bar』指的这个元件;

进度条边框:套在进度条外面以表达100%进度条长度的矩形,文中的『 max』指的这个元件;

进度:由进度数字和百分比2个文本构成,文中的『num』指的数字元件。

Axure进度条

进度条由空涨到满,满时停止;

数字根据进度条当前进度显示对应百分比。

首先,进度条初始状态应该是空的,所以应该将进度条宽度改为0,但Axure不能为0,最低为1,所以将宽度改为1。

进度条是出现这个进度条时就开始加载的,所以这个交互要做在『载入时』中。

载入时,我们需要通过『设置尺寸』交互来使进度条的宽度发生改变,由1增至进度条边框的宽度。

Axure设置尺寸

锚点选择左侧,因为进度条是由左侧开始展开的。动画选择线性,时间是你期望进度条由空涨到满的时间。

为了避免调整进度条宽度造成的返工,所以我们将进度条边框设置为局部变量,以便获得进度条边框的宽度。

设置的时候记得将max添加到局部变量中,否则是不会生效的。

Axure添加变量

[[max.width]]的含义是,局部变量中的max所定义的这个元件的宽度。

为了便于大家理解,我将max元件的局部变量名字也设置为了max。

至此,进度条动画完毕了。

数字需要一直刷新,我们通过不断显示和隐藏文字来实现自循环,显示num:初始时隐藏,加载时显示,然后才能进入显示时的交互。设置文本-进度条当前的百分比     //公式=进度条当前宽度÷进度条边框宽度。等待0毫秒:不加这个的话数字不刷新,不知道为什么,总之加上就对了。

隐藏This

显示This:显示后就会进入显示时交互,再循环一次此步骤。

Axure添加变量

这时显示的是零点几几的百分比,并且后面精细到了小数点后N位,所以我们需要将它乘以100,并且取整。

[[Math.floor(bar.width/max.width*100)]]

看到很多同学在使用函数的时候会在所有变量外面都加上2层中括号,例[[[[bar.width]]/[[max.width]]]]这样就是错的!实际上是不需要的,在最外层套上双层中括号就可以了。

有些同学也许想说,如果我想显示到小数点后1位的进度怎么办呢?很简单,[[Math.floor(bar.width/max.width*1000)]]/10,先乘以1000,取整后再除10就可以了。

这样显示的数字就是百分比的数字显示,再在公式最后面加一个『%』文本就完成啦。

以上内容就是Axure实现超级简单的进度条制作的步骤,更多感兴趣的教程,点击文章:Axure全局和页面辅助线的创建

1 comment so far

使用Axure制作九宫格拼图 | Axure 中文网Posted on9:16 上午 - 1月 30, 2019

[…] 以上步骤拼图已经做完,更多感兴趣的教程,点击教程:Axure实现超级简单的进度条制作。 […]

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