目錄
1.需要注意的地方
2.元件準備
3.互動
在使用Axure rp9參考網實作進度條的過程中，發現有一個地方出了問題，自己也是找了好久才将錯誤修改正确的，下面記錄一下這個過程，防止下次使用的時候再次犯這樣的錯誤。
1.需要注意的地方
（1）進度條如何實作？
（2）進度百分比如何實作？
2.元件準備
從元件庫中拖動一個矩形作為背景槽，命名為“background”大小設定為寬200*高20，一個按鈕作為開始按鈕，命名為“start”大小設定為寬100*高40，一個動态面闆作為進度條，命名“panel”，為面闆增加一個狀态“state2”，設定相同的背景色，大小設定為寬1*高20，一個文本标簽，命名“text”。
3.互動
（1）當我們滑鼠點選“開始”，進度條開始變化，是以我們要為“開始”按鈕添加“滑鼠點選時”互動，設定“panel”尺寸，設定寬度為“background”寬度的1%，高度為“background”的高度。
這樣設定完之後我們打開浏覽器預覽，點選“開始”，發現動态面闆隻發生了一點點變化，就是變成了“background”寬度的1%。
（2）進度百分比實作，為動态面闆“尺寸改變時”添加互動，為“text”設定文本。
根據“ 進度 = 進度條的寬度 / 進度槽的寬度 % ”，轉換成原型中的函數為：
[[ math.ceil ( 100 * LVAR1.width / LVAR2.width ) ]] %
math.ceil(x)函數為向上取整函數，傳回大于或等于參數x，并且與之最接近的整數。
LVAR1.width是【進度條】的寬度，LVAR2.width是【進度槽】的寬度。兩者相除後乘以100，再向上取整後得到百分比數制的整數數值部分，再添加“%”号組成百分比數制的文本。
做完上述步驟，浏覽器預覽，發現顯示進度1%，進度條和進度百分比都沒有變化。
因為動态面闆沒有變化，通過動态面闆的的狀态改變達到進度條增長的效果，是以設定動态面闆為向後循環。
（3）為動态面闆“狀态改變時”，添加條件 if “[[LVAR1.width]]” < “[[LVAR2.width]]”，LVAR1.width是【進度條】的寬度，LVAR2.width是【進度槽】的寬度。【注意：“狀态改變時”并不是再去建立一個互動，而是在動态面闆“尺寸改變時”互動中添加，就是在這裡被迷惑了】
（4）為動态面闆設定尺寸，寬度為[[LVAR1.width+LVAR2.width/100]]，高度為[[LVAR1.height]]，設定動畫為線性，時間50ms。
做完上述步驟，再按F5預覽，發現已經出現了我們需要的效果。
源檔案附有拖動顯示百分比，比較簡單，就不做詳述了，下載下傳後自己去看。
原型預覽位址：https://i8v8py.axshare.com
源檔案下載下傳https://pan.baidu.com/s/1uhKZldBP6CYVlESdTDa6kQ 密碼/tac6
本文由 @就這樣吧！ 原創釋出于人人都是産品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協定