Axure的進度條應該如何實現(xiàn)呢？本文對每一個步驟進行了講解。

1.需要注意的地方

（1）進度條如何實現(xiàn)？

（2）進度百分比如何實現(xiàn)？

2.元件準備

從元件庫中拖動一個矩形作為背景槽，命名為“background”大小設置為寬200*高20，一個按鈕作為開始按鈕，命名為“start”大小設置為寬100*高40，一個動態(tài)面板作為進度條，命名“panel”，為面板增加一個狀態(tài)“state2”，設置相同的背景色，大小設置為寬1*高20，一個文本標簽，命名“text”。

3.交互

（1）當我們鼠標點擊“開始”，進度條開始變化，所以我們要為“開始”按鈕添加“鼠標點擊時”交互，設置“panel”尺寸，設置寬度為“background”寬度的1%，高度為“background”的高度。

這樣設置完之后我們打開瀏覽器預覽，點擊“開始”，發(fā)現(xiàn)動態(tài)面板只發(fā)生了一點點變化，就是變成了“background”寬度的1%。

（2）進度百分比實現(xiàn)，為動態(tài)面板“尺寸改變時”添加交互，為“text”設置文本。

根據(jù)“ 進度 = 進度條的寬度 / 進度槽的寬度 % ”，轉換成原型中的函數(shù)為：

[[ math.ceil ( 100 * LVAR1.width / LVAR2.width ) ]] %

math.ceil(x)函數(shù)為向上取整函數(shù)，返回大于或等于參數(shù)x，并且與之最接近的整數(shù)。

LVAR1.width是【進度條】的寬度，LVAR2.width是【進度槽】的寬度。兩者相除后乘以100，再向上取整后得到百分比數(shù)制的整數(shù)數(shù)值部分，再添加“%”號組成百分比數(shù)制的文本。

做完上述步驟，瀏覽器預覽，發(fā)現(xiàn)顯示進度1%，進度條和進度百分比都沒有變化。

因為動態(tài)面板沒有變化，通過動態(tài)面板的的狀態(tài)改變達到進度條增長的效果，所以設置動態(tài)面板為向后循環(huán)。

（3）為動態(tài)面板“狀態(tài)改變時”，添加條件 ?if “[[LVAR1.width]]” < “[[LVAR2.width]]”，LVAR1.width是【進度條】的寬度，LVAR2.width是【進度槽】的寬度。

為動態(tài)面板設置尺寸，寬度為[[LVAR1.width+LVAR2.width/100]]，高度為[[LVAR1.height]]，設置動畫為線性，時間50ms。

做完上述步驟，再按F5預覽，發(fā)現(xiàn)已經出現(xiàn)了我們需要的效果。

源文件附有拖動顯示百分比，比較簡單，就不做詳述了，下載后自己去看。

原型預覽地址：https://i8v8py.axshare.com

源文件下載https://pan.baidu.com/s/1uhKZldBP6CYVlESdTDa6kQ ?密碼/tac6

本文由 @就這樣吧！ 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議