有時候越簡單的元件，使用率越高，我們要堅持維護(hù)自己的元件庫，不要因為是一個小元件而放過他，這樣時間長了才能為我們的工作節(jié)省很多時間！

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

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

元件名稱：

進(jìn)度條

功能描述：

1. 點擊開始，進(jìn)度條變化。
2. 到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)載。