靜態(tài)元素構(gòu)成

1. 進(jìn)度條：會增長的矩形條，文中的『bar』指的這個元件；
2. 進(jìn)度條邊框：套在進(jìn)度條外面以表達(dá)100%進(jìn)度條長度的矩形，文中的『 max』指的這個元件；
3. 進(jìn)度：由進(jìn)度數(shù)字和百分比2個文本構(gòu)成，文中的『num』指的數(shù)字元件。

動態(tài)效果分析

1. 進(jìn)度條由空漲到滿，滿時停止；
2. 數(shù)字根據(jù)進(jìn)度條當(dāng)前進(jìn)度顯示對應(yīng)百分比。

進(jìn)度條動態(tài)效果制作

首先，進(jìn)度條初始狀態(tài)應(yīng)該是空的，所以應(yīng)該將進(jìn)度條寬度改為0，但Axure不能為0，最低為1，所以將寬度改為1。

進(jìn)度條是出現(xiàn)這個進(jìn)度條時就開始加載的，所以這個交互要做在『載入時』中。

載入時，我們需要通過『設(shè)置尺寸』交互來使進(jìn)度條的寬度發(fā)生改變，由1增至進(jìn)度條邊框的寬度。

錨點選擇左側(cè)，因為進(jìn)度條是由左側(cè)開始展開的。動畫選擇線性，時間是你期望進(jìn)度條由空漲到滿的時間。

為了避免調(diào)整進(jìn)度條寬度造成的返工，所以我們將進(jìn)度條邊框設(shè)置為局部變量，以便獲得進(jìn)度條邊框的寬度。

設(shè)置的時候記得將max添加到局部變量中，否則是不會生效的。

[[max.width]]的含義是，局部變量中的max所定義的這個元件的寬度。

為了便于大家理解，我將max元件的局部變量名字也設(shè)置為了max。

至此，進(jìn)度條動畫完畢了。

數(shù)字num百分比動態(tài)效果制作

數(shù)字需要一直刷新，我們通過不斷顯示和隱藏文字來實現(xiàn)自循環(huán)。

num『加載時』

顯示num     //初始時隱藏，加載時顯示，然后才能進(jìn)入顯示時的交互。

num『顯示時』

設(shè)置文本-進(jìn)度條當(dāng)前的百分比     //公式=進(jìn)度條當(dāng)前寬度÷進(jìn)度條邊框?qū)挾?/span>

等待0毫秒     //不加這個的話數(shù)字不刷新，不知道為什么，總之加上就對了。

隱藏This

顯示This     //顯示后就會進(jìn)入顯示時交互，再循環(huán)一次此步驟。

百分比顯示詳解

這時顯示的是零點幾幾的百分比，并且后面精細(xì)到了小數(shù)點后N位，所以我們需要將它乘以100，并且取整。

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

看到很多同學(xué)在使用函數(shù)的時候會在所有變量外面都加上2層中括號，例[[[[bar.width]]/[[max.width]]]]這樣就是錯的！實際上是不需要的，在最外層套上雙層中括號就可以了。

有些同學(xué)也許想說，如果我想顯示到小數(shù)點后1位的進(jìn)度怎么辦呢？很簡單，[[Math.floor(bar.width/max.width*1000)]]/10，先乘以1000，取整后再除10就可以了。

這樣顯示的數(shù)字就是百分比的數(shù)字顯示，再在公式最后面加一個『%』文本就完成啦。