本案例制作一個可拖動的條形進(jìn)度條，同時可以顯示當(dāng)前位置的百分比。一起來看看~

實現(xiàn)效果：

• 自由拖動進(jìn)度條
• 記錄當(dāng)前進(jìn)度條的百分比
• 順便記錄下你的顏值

實現(xiàn)邏輯

this.right函數(shù)：當(dāng)前元件最右側(cè)的橫坐標(biāo)。

LVAR.toFixed（decimalPoints）函數(shù)：用于選取保留幾位小數(shù)，LVER為所選值，decimalPoints數(shù)字，例如 5.toFixed(2)是指5.00 。

100除以進(jìn)度條的長度就等于每拖動進(jìn)度條單位長度時對應(yīng)的百分比數(shù)值。

交互步驟

Step one

準(zhǔn)備素材：需要一個進(jìn)度條框，一個用戶控制顯示范圍的動態(tài)面板，一個進(jìn)度條，一個用戶拖動進(jìn)度條的動態(tài)面板，和一個顯示百分比的顯示框。

如圖所示：

Step two

進(jìn)度條長度為475，將進(jìn)度條轉(zhuǎn)換為動態(tài)面板，動態(tài)面板取名為進(jìn)度條，放置在橫坐標(biāo)為-450的位置。將進(jìn)度條范圍框放置在橫坐標(biāo)為0的位置。

創(chuàng)建動態(tài)面板“進(jìn)度條范圍”，將進(jìn)度條動態(tài)面板和進(jìn)度條顯示框都放在動態(tài)面板內(nèi)。（這里注意，需要將進(jìn)度條范圍動態(tài)面板取消勾選自適應(yīng)內(nèi)容）

將百分比顯示框放在合適的位置，隱藏邊框線。

ok，準(zhǔn)備工作基本完成。

Step three

下一步，是設(shè)置交互，本案例交互非常短。

選中進(jìn)度條動態(tài)面板：

拖動時：

設(shè)置移動

• 進(jìn)度條水平移動
• 邊界Right≤425，Left≥-450

設(shè)置文本

百分比顯示框為[[((This.right-25)/4).toFixed(0)]] %

OK，完成啦?。ń忉屛谋究虻暮瘮?shù)：意思是將進(jìn)度條框長度為425，進(jìn)度條初始位置占去了25，剩下的距離為進(jìn)度條可移動距離為400，進(jìn)度條每移動一個單位，那么對應(yīng)的百分比就是0.25，即1/4。因此(This.right-25)/4就等于進(jìn)度條當(dāng)前位置占全部距離的百分比，再利用取小數(shù)點后0位，就可以得到當(dāng)前進(jìn)度條位置的整數(shù)百分比）

最后

最后，大家只要復(fù)制剛才做的交互，同時寫上對應(yīng)的能力值，就可以做到本案例的效果啦。

依然鄭重提醒大家，本教程只能用Axure RP 9 及以上版本打開，堅持使用Axure RP 9的原因很簡單，就是想與時俱進(jìn)，擁抱變化，適應(yīng)未來。

最后，原型下載鏈接：https://pan.baidu.com/s/1psd4tDC0FmgICeq7Wyvdxw

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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