靜態(tài)元素構(gòu)成
- 進(jìn)度條：會增長的矩形條，文中的『bar』指的這個元件；
- 進(jìn)度條邊框：套在進(jìn)度條外面以表達(dá)100%進(jìn)度條長度的矩形，文中的『 max』指的這個元件；
- 進(jìn)度：由進(jìn)度數(shù)字和百分比2個文本構(gòu)成，文中的『num』指的數(shù)字元件。
動態(tài)效果分析
- 進(jìn)度條由空漲到滿，滿時停止；
- 數(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ù)字顯示，再在公式最后面加一個『%』文本就完成啦。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。