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

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

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

元件名稱：

進度條

功能描述：

1. 點擊開始，進度條變化。
2. 到100%，進度條停止變化

方法/步驟：

第一步：畫出對應的組件

1.先把進度條畫出來

1)拖進1個矩形，名稱為“背景”。

填充色為白色，邊框為黑色，大小385*30，圓角半徑為5（根據使用者具體情況而定）。

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

填充色為灰色，邊框為黑色（根據使用者具體情況而定）。

3)拖進一個文本標簽，名稱為“進度”。

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

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

4)全選，右鍵轉換為動態面板，名稱為“進度條all”。

ok啦，進度條的主要組件我們就畫好了，下面就開始畫輔助的組件了。

2..拖進一個按鈕，名稱為“開始”，如下圖。

3.拖進一個動態面板，名稱為“time”，建立兩個狀態，state1、state2。這個動態面板是用來控制進度的，所以里面不用放組件。我為了上圖的時候清楚些，把state1的背景設為了黑色，如下圖。

ok，到這里我們所需要的組件就已經畫完了。

第二步：讓進度條動起來

此步驟要實現進度條初始為0%，每隔1s走10%的進度。

1.設置進度條的初始狀態——給“進度條all”動態面板添加“載入時”事件。

當“進度條all”動態面板第一次載入的時候，“進度條”矩形大小設為0*0，“進度”文本設為“0%”，如下圖。

2.給“開始”按鈕添加“鼠標單擊時”事件。

單擊“開始”時，讓“time”動態面板狀態開始循環，每個1s改變一次狀態，如下圖。

注：要把“首個狀態延時1000毫秒后切換”勾選上。

3.給“time”動態面板添加“狀態改變時”事件

此步驟的目的是讓“進度條”矩形的長度跟著“time”動態面板狀態的變化而變化。

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

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

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

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

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

注意一定要把百分號寫在“[[]]”雙括號的外面。

ok，這樣我們的進度條就動起來了，F5預覽一下吧。

第三步：讓進度條停下來

預覽之后，我們會發現，進度條一直在走，沒有停下來。此步驟要實現的就是讓進度條到100%時停下來。

這個步驟很簡單，只需要給上面的事件（即“time”動態面板的“狀態改變時”事件）添加一個條件即可，如下圖。

又一個簡單的小元件完成了，在預覽看看吧！

建立自己的元件庫（一）——輪播圖

建立自己的元件庫（二）——驗證碼

本文由 @ningmengsuan 原創發布于人人都是產品經理。未經許可，禁止轉載。