Axure rp9實現進度條

原創

StriveFarrell

2020-02-21 15:03

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是【進度槽】的寬度。【注意：“狀態改變時”並不是再去創建一個交互，而是在動態面板“尺寸改變時”交互中添加，就是在這裏被迷惑了】