超级简单的进度条

axure商城

大家好我是Synmo梦儿,我的教程都是使用Axure8制作的,如果我教程中出现了你找不到的选项,那也许就是版本的原因,特此说明。今天教大家做一个效果棒棒哒并且超级简单的进度条,包教包会,学不会我打你,效果如下:

进度条

静态元素构成

  1. 进度条:会增长的矩形条,文中的『bar』指的这个元件;
  2. 进度条边框:套在进度条外面以表达100%进度条长度的矩形,文中的『 max』指的这个元件;
  3. 进度:由进度数字和百分比2个文本构成,文中的『num』指的数字元件。

动态效果分析

  1. 进度条由空涨到满,满时停止;
  2. 数字根据进度条当前进度显示对应百分比。

进度条动态效果制作

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

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

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

p2

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

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

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

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

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

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

数字num百分比动态效果制作

数字需要一直刷新,我们通过不断显示和隐藏文字来实现自循环。

num『加载时』

显示num     //初始时隐藏,加载时显示,然后才能进入显示时的交互。

num『显示时』

设置文本-进度条当前的百分比     //公式=进度条当前宽度÷进度条边框宽度

等待0毫秒     //不加这个的话数字不刷新,不知道为什么,总之加上就对了。

隐藏This

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

百分比显示详解

p3

这时显示的是零点几几的百分比,并且后面精细到了小数点后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商城

相关推荐

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

超级简单的进度条