建立自己的元件庫(三)——進(jìn)度條
有時候越簡單的元件,使用率越高,我們要堅持維護(hù)自己的元件庫,不要因為是一個小元件而放過他,這樣時間長了才能為我們的工作節(jié)省很多時間!
我在上一篇文章中寫了一個比較簡單的驗證碼元件的實現(xiàn),今天依舊是一款簡單的元件。
提示:我用的是Axure8.0,可能文中的某些操作,7.0不支持,但制作思路基本相同。
元件名稱:
進(jìn)度條
功能描述:
- 點擊開始,進(jìn)度條變化。
- 到100%,進(jìn)度條停止變化
方法/步驟:
第一步:畫出對應(yīng)的組件
1.先把進(jìn)度條畫出來
1)拖進(jìn)1個矩形,名稱為“背景”。
填充色為白色,邊框為黑色,大小385*30,圓角半徑為5(根據(jù)使用者具體情況而定)。
2)拖進(jìn)1個矩形,名稱為“進(jìn)度條”,大小、圓角半徑與上一個矩形一樣。
填充色為灰色,邊框為黑色(根據(jù)使用者具體情況而定)。
3)拖進(jìn)一個文本標(biāo)簽,名稱為“進(jìn)度”。
字體“微軟雅黑”,字體大小12(依然是根據(jù)使用者具體情況而定^_^)。
樣子如下圖1,整理后如下圖2,“進(jìn)度條”矩形壓在“背景”矩形上。
4)全選,右鍵轉(zhuǎn)換為動態(tài)面板,名稱為“進(jìn)度條all”。
ok啦,進(jìn)度條的主要組件我們就畫好了,下面就開始畫輔助的組件了。
2..拖進(jìn)一個按鈕,名稱為“開始”,如下圖。
3.拖進(jìn)一個動態(tài)面板,名稱為“time”,建立兩個狀態(tài),state1、state2。這個動態(tài)面板是用來控制進(jìn)度的,所以里面不用放組件。我為了上圖的時候清楚些,把state1的背景設(shè)為了黑色,如下圖。
ok,到這里我們所需要的組件就已經(jīng)畫完了。
第二步:讓進(jìn)度條動起來
此步驟要實現(xiàn)進(jìn)度條初始為0%,每隔1s走10%的進(jìn)度。
1.設(shè)置進(jìn)度條的初始狀態(tài)——給“進(jìn)度條all”動態(tài)面板添加“載入時”事件。
當(dāng)“進(jìn)度條all”動態(tài)面板第一次載入的時候,“進(jìn)度條”矩形大小設(shè)為0*0,“進(jìn)度”文本設(shè)為“0%”,如下圖。
2.給“開始”按鈕添加“鼠標(biāo)單擊時”事件。
單擊“開始”時,讓“time”動態(tài)面板狀態(tài)開始循環(huán),每個1s改變一次狀態(tài),如下圖。
注:要把“首個狀態(tài)延時1000毫秒后切換”勾選上。
3.給“time”動態(tài)面板添加“狀態(tài)改變時”事件
此步驟的目的是讓“進(jìn)度條”矩形的長度跟著“time”動態(tài)面板狀態(tài)的變化而變化。
1)添加變量值n,初始值為0,。設(shè)置變量值n=n+1。(此步驟的目的是讓變量值每隔1s自增1,后面用來控制“進(jìn)度條”矩形的長度。)
2)在同一個事件里,設(shè)置“進(jìn)度條”矩形的寬為[(變量值n)*(“背景”矩形長度)/10],高不變,如下圖。
點擊“fx”,彈出“編輯值”對話框,選擇“添加局部變量”,LVAR1=元件——背景,如下圖。
選擇“插入變量或函數(shù)”,設(shè)置寬度=n*LVAR1.width/10,如下圖。此步驟也可以直接輸入。
2)仍然在同一個事件里,設(shè)置“進(jìn)度”文本標(biāo)簽的文本為[(變量值n)*10]%,如下圖。
注意一定要把百分號寫在“[[]]”雙括號的外面。
ok,這樣我們的進(jìn)度條就動起來了,F(xiàn)5預(yù)覽一下吧。
第三步:讓進(jìn)度條停下來
預(yù)覽之后,我們會發(fā)現(xiàn),進(jìn)度條一直在走,沒有停下來。此步驟要實現(xiàn)的就是讓進(jìn)度條到100%時停下來。
這個步驟很簡單,只需要給上面的事件(即“time”動態(tài)面板的“狀態(tài)改變時”事件)添加一個條件即可,如下圖。
又一個簡單的小元件完成了,在預(yù)覽看看吧!
本文由 @ningmengsuan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
咋不跟新了呢 ?
最后100%怎么不顯示了
time是做什么的?沒看明白,建議完成后錄制一個視頻方便大家看效果~~ ?? ??
根本就不動 ??
學(xué)習(xí)了 ,謝謝!