有時(shí)候越簡(jiǎn)單的元件，使用率越高，我們要堅(jiān)持維護(hù)自己的元件庫(kù)，不要因?yàn)槭且粋€(gè)小元件而放過(guò)他，這樣時(shí)間長(zhǎng)了才能為我們的工作節(jié)省很多時(shí)間！

我在上一篇文章中寫(xiě)了一個(gè)比較簡(jiǎn)單的驗(yàn)證碼元件的實(shí)現(xiàn)，今天依舊是一款簡(jiǎn)單的元件。

提示：我用的是Axure8.0，可能文中的某些操作，7.0不支持，但制作思路基本相同。

元件名稱：

進(jìn)度條

功能描述：

1. 點(diǎn)擊開(kāi)始，進(jìn)度條變化。
2. 到100%，進(jìn)度條停止變化

方法/步驟：

第一步：畫(huà)出對(duì)應(yīng)的組件

1.先把進(jìn)度條畫(huà)出來(lái)

1)拖進(jìn)1個(gè)矩形，名稱為“背景”。

填充色為白色，邊框?yàn)楹谏笮?85*30，圓角半徑為5（根據(jù)使用者具體情況而定）。

2)拖進(jìn)1個(gè)矩形，名稱為“進(jìn)度條”，大小、圓角半徑與上一個(gè)矩形一樣。

填充色為灰色，邊框?yàn)楹谏ǜ鶕?jù)使用者具體情況而定）。

3)拖進(jìn)一個(gè)文本標(biāo)簽，名稱為“進(jìn)度”。

字體“微軟雅黑”，字體大小12（依然是根據(jù)使用者具體情況而定^_^）。

樣子如下圖1，整理后如下圖2，“進(jìn)度條”矩形壓在“背景”矩形上。

4)全選，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，名稱為“進(jìn)度條all”。

ok啦，進(jìn)度條的主要組件我們就畫(huà)好了，下面就開(kāi)始畫(huà)輔助的組件了。

2..拖進(jìn)一個(gè)按鈕，名稱為“開(kāi)始”，如下圖。

3.拖進(jìn)一個(gè)動(dòng)態(tài)面板，名稱為“time”，建立兩個(gè)狀態(tài)，state1、state2。這個(gè)動(dòng)態(tài)面板是用來(lái)控制進(jìn)度的，所以里面不用放組件。我為了上圖的時(shí)候清楚些，把state1的背景設(shè)為了黑色，如下圖。

ok，到這里我們所需要的組件就已經(jīng)畫(huà)完了。

第二步：讓進(jìn)度條動(dòng)起來(lái)

此步驟要實(shí)現(xiàn)進(jìn)度條初始為0%，每隔1s走10%的進(jìn)度。

1.設(shè)置進(jìn)度條的初始狀態(tài)——給“進(jìn)度條all”動(dòng)態(tài)面板添加“載入時(shí)”事件。

當(dāng)“進(jìn)度條all”動(dòng)態(tài)面板第一次載入的時(shí)候，“進(jìn)度條”矩形大小設(shè)為0*0，“進(jìn)度”文本設(shè)為“0%”，如下圖。

2.給“開(kāi)始”按鈕添加“鼠標(biāo)單擊時(shí)”事件。

單擊“開(kāi)始”時(shí)，讓“time”動(dòng)態(tài)面板狀態(tài)開(kāi)始循環(huán)，每個(gè)1s改變一次狀態(tài)，如下圖。

注：要把“首個(gè)狀態(tài)延時(shí)1000毫秒后切換”勾選上。

3.給“time”動(dòng)態(tài)面板添加“狀態(tài)改變時(shí)”事件

此步驟的目的是讓“進(jìn)度條”矩形的長(zhǎng)度跟著“time”動(dòng)態(tài)面板狀態(tài)的變化而變化。

1)添加變量值n，初始值為0,。設(shè)置變量值n=n+1。（此步驟的目的是讓變量值每隔1s自增1，后面用來(lái)控制“進(jìn)度條”矩形的長(zhǎng)度。）

2)在同一個(gè)事件里，設(shè)置“進(jìn)度條”矩形的寬為[(變量值n）*(“背景”矩形長(zhǎng)度)/10]，高不變，如下圖。

點(diǎn)擊“fx”，彈出“編輯值”對(duì)話框，選擇“添加局部變量”，LVAR1=元件——背景，如下圖。

選擇“插入變量或函數(shù)”，設(shè)置寬度=n*LVAR1.width/10，如下圖。此步驟也可以直接輸入。

2)仍然在同一個(gè)事件里，設(shè)置“進(jìn)度”文本標(biāo)簽的文本為[(變量值n）*10]%，如下圖。

注意一定要把百分號(hào)寫(xiě)在“[[]]”雙括號(hào)的外面。

ok，這樣我們的進(jìn)度條就動(dòng)起來(lái)了，F(xiàn)5預(yù)覽一下吧。

第三步：讓進(jìn)度條停下來(lái)

預(yù)覽之后，我們會(huì)發(fā)現(xiàn)，進(jìn)度條一直在走，沒(méi)有停下來(lái)。此步驟要實(shí)現(xiàn)的就是讓進(jìn)度條到100%時(shí)停下來(lái)。

這個(gè)步驟很簡(jiǎn)單，只需要給上面的事件（即“time”動(dòng)態(tài)面板的“狀態(tài)改變時(shí)”事件）添加一個(gè)條件即可，如下圖。

又一個(gè)簡(jiǎn)單的小元件完成了，在預(yù)覽看看吧！

建立自己的元件庫(kù)（一）——輪播圖

建立自己的元件庫(kù)（二）——驗(yàn)證碼

本文由 @ningmengsuan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。