超级简单的进度条

　　静态元素构成

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

　　进度条边框：套在进度条外面以表达*进度条长度的矩形，文中的『 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就可以了。

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

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。