大家好我是Synmo梦儿,我的教程都是使用Axure8制作的,如果我教程中出现了你找不到的选项,那也许就是版本的原因,特此说明。今天教大家做一个效果棒棒哒并且超级简单的进度条,包教包会,学不会我打你,效果如下:
静态元素构成
- 进度条:会增长的矩形条,文中的『bar』指的这个元件;
- 进度条边框:套在进度条外面以表达100%进度条长度的矩形,文中的『 max』指的这个元件;
- 进度:由进度数字和百分比2个文本构成,文中的『num』指的数字元件。
动态效果分析
- 进度条由空涨到满,满时停止;
- 数字根据进度条当前进度显示对应百分比。
进度条动态效果制作
首先,进度条初始状态应该是空的,所以应该将进度条宽度改为0,但Axure不能为0,最低为1,所以将宽度改为1。
进度条是出现这个进度条时就开始加载的,所以这个交互要做在『载入时』中。
载入时,我们需要通过『设置尺寸』交互来使进度条的宽度发生改变,由1增至进度条边框的宽度。
锚点选择左侧,因为进度条是由左侧开始展开的。动画选择线性,时间是你期望进度条由空涨到满的时间。
为了避免调整进度条宽度造成的返工,所以我们将进度条边框设置为局部变量,以便获得进度条边框的宽度。
设置的时候记得将max添加到局部变量中,否则是不会生效的。
[[max.width]]的含义是,局部变量中的max所定义的这个元件的宽度。
为了便于大家理解,我将max元件的局部变量名字也设置为了max。
至此,进度条动画完毕了。
数字num百分比动态效果制作
数字需要一直刷新,我们通过不断显示和隐藏文字来实现自循环。
num『加载时』
显示num //初始时隐藏,加载时显示,然后才能进入显示时的交互。
num『显示时』
设置文本-进度条当前的百分比 //公式=进度条当前宽度÷进度条边框宽度
等待0毫秒 //不加这个的话数字不刷新,不知道为什么,总之加上就对了。
隐藏This
显示This //显示后就会进入显示时交互,再循环一次此步骤。
百分比显示详解
这时显示的是零点几几的百分比,并且后面精细到了小数点后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就可以了。
这样显示的数字就是百分比的数字显示,再在公式最后面加一个『%』文本就完成啦。
菜鸟表示好几步都没看懂