靜態(tài)元素構(gòu)成
- 進(jìn)度條：會(huì)增長(zhǎng)的矩形條，文中的『bar』指的這個(gè)元件；
- 進(jìn)度條邊框：套在進(jìn)度條外面以表達(dá)100%進(jìn)度條長(zhǎng)度的矩形，文中的『 max』指的這個(gè)元件；
- 進(jìn)度：由進(jìn)度數(shù)字和百分比2個(gè)文本構(gòu)成，文中的『num』指的數(shù)字元件。
動(dòng)態(tài)效果分析
- 進(jìn)度條由空漲到滿，滿時(shí)停止；
- 數(shù)字根據(jù)進(jìn)度條當(dāng)前進(jìn)度顯示對(duì)應(yīng)百分比。
進(jìn)度條動(dòng)態(tài)效果制作
首先，進(jìn)度條初始狀態(tài)應(yīng)該是空的，所以應(yīng)該將進(jìn)度條寬度改為0，但Axure不能為0，最低為1，所以將寬度改為1。
進(jìn)度條是出現(xiàn)這個(gè)進(jìn)度條時(shí)就開始加載的，所以這個(gè)交互要做在『載入時(shí)』中。
載入時(shí)，我們需要通過『設(shè)置尺寸』交互來(lái)使進(jìn)度條的寬度發(fā)生改變，由1增至進(jìn)度條邊框的寬度。
錨點(diǎn)選擇左側(cè)，因?yàn)檫M(jìn)度條是由左側(cè)開始展開的。動(dòng)畫選擇線性，時(shí)間是你期望進(jìn)度條由空漲到滿的時(shí)間。
為了避免調(diào)整進(jìn)度條寬度造成的返工，所以我們將進(jìn)度條邊框設(shè)置為局部變量，以便獲得進(jìn)度條邊框的寬度。
設(shè)置的時(shí)候記得將max添加到局部變量中，否則是不會(huì)生效的。
[[max.width]]的含義是，局部變量中的max所定義的這個(gè)元件的寬度。
為了便于大家理解，我將max元件的局部變量名字也設(shè)置為了max。
至此，進(jìn)度條動(dòng)畫完畢了。
數(shù)字num百分比動(dòng)態(tài)效果制作
數(shù)字需要一直刷新，我們通過不斷顯示和隱藏文字來(lái)實(shí)現(xiàn)自循環(huán)。
num『加載時(shí)』
顯示num //初始時(shí)隱藏，加載時(shí)顯示，然后才能進(jìn)入顯示時(shí)的交互。
num『顯示時(shí)』
設(shè)置文本-進(jìn)度條當(dāng)前的百分比 //公式=進(jìn)度條當(dāng)前寬度÷進(jìn)度條邊框?qū)挾?/span>
等待0毫秒 //不加這個(gè)的話數(shù)字不刷新，不知道為什么，總之加上就對(duì)了。
隱藏This
顯示This //顯示后就會(huì)進(jìn)入顯示時(shí)交互，再循環(huán)一次此步驟。
百分比顯示詳解
這時(shí)顯示的是零點(diǎn)幾幾的百分比，并且后面精細(xì)到了小數(shù)點(diǎn)后N位，所以我們需要將它乘以100，并且取整。
[[Math.floor(bar.width/max.width*100)]]
看到很多同學(xué)在使用函數(shù)的時(shí)候會(huì)在所有變量外面都加上2層中括號(hào)，例[[[[bar.width]]/[[max.width]]]]這樣就是錯(cuò)的！實(shí)際上是不需要的，在最外層套上雙層中括號(hào)就可以了。
有些同學(xué)也許想說(shuō)，如果我想顯示到小數(shù)點(diǎn)后1位的進(jìn)度怎么辦呢？很簡(jiǎn)單，[[Math.floor(bar.width/max.width*1000)]]/10，先乘以1000，取整后再除10就可以了。
這樣顯示的數(shù)字就是百分比的數(shù)字顯示，再在公式最后面加一個(gè)『%』文本就完成啦。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。