怎樣用Axure實(shí)現(xiàn)拖動(dòng)進(jìn)度條？一起來看下吧~

可拖動(dòng)進(jìn)度條的應(yīng)用場(chǎng)景，例如調(diào)節(jié)APP屏幕亮度，音樂播放器的音量等。

效果如下(●ˇ?ˇ●)

準(zhǔn)備4個(gè)元件，如下所示：

1. 一個(gè)圓形滑塊；（用于觸摸滑動(dòng)）
2. 一個(gè)矩形元件，填充色為灰色，改為圓角矩形；（作為進(jìn)度條的底部背景色）
3. 從2復(fù)制一個(gè)同樣的圓角矩形元件，將填充色改為其他顏色；（作為進(jìn)度提示的填充色）
4. 一個(gè)文字元件。（顯示百分比進(jìn)度）

將2、3兩個(gè)圓角矩形元件重疊，需要嚴(yán)絲合縫的重疊，設(shè)置x值和y值一致。

設(shè)置填充色元件的width=0；因?yàn)槌跏紶顟B(tài)進(jìn)度是0的~

然后將圓形滑塊與進(jìn)度條左側(cè)對(duì)齊，布局調(diào)整為一個(gè)進(jìn)度條該有的樣子 ，如下圖：

到這里，可以F5欣賞一下UI效果(。???)ノ

咦，圓形元件，為什么無法拖拽？說好的自由拖拽呢？

動(dòng)態(tài)面板是唯一一個(gè)能夠被拖動(dòng)的元件，任何元件想要達(dá)到拖動(dòng)的效果，必須放在動(dòng)態(tài)面板中。并且，在動(dòng)態(tài)面板的觸發(fā)事件“拖動(dòng)時(shí)”當(dāng)中設(shè)置用例。所以要達(dá)到自由拖拽的效果，必須是動(dòng)態(tài)面板，其他元件是沒有這個(gè)功能的。

將圓形元件轉(zhuǎn)換為動(dòng)態(tài)面板：選中元件，點(diǎn)擊右鍵>轉(zhuǎn)換為動(dòng)態(tài)面板，動(dòng)態(tài)面板的觸發(fā)事件“拖動(dòng)時(shí)”中，添加用例。

用例包含下列動(dòng)作：

圓形滑塊設(shè)置水平拖動(dòng)，并且設(shè)置滑動(dòng)拖動(dòng)的左右邊界，限制其拖動(dòng)邊界不超過bg背景元件的左右兩側(cè)。

圓形滑塊轉(zhuǎn)為動(dòng)態(tài)面板后，在面板狀態(tài)中，其位置是從（0，0）開始的，所以滑動(dòng)范圍是從0開始，即左側(cè)left>=0，限制滑動(dòng)最大距離不超過進(jìn)度條灰色元件的寬度，即右側(cè)right<=背景.width

進(jìn)度條process跟隨動(dòng)態(tài)面板拖拽實(shí)現(xiàn)顏色填充。這里通過修改進(jìn)度條的尺寸，實(shí)現(xiàn)填充色的前進(jìn)進(jìn)度。

如下圖：

這里不得不提的就是錨點(diǎn)，anchor 左側(cè)，表示以該點(diǎn)作為作為原點(diǎn)，進(jìn)行移動(dòng)操作。

什么意思呢？

就是選擇了左側(cè)作為錨點(diǎn)，那么進(jìn)度條填充色這個(gè)元件，左側(cè)就是固定在這個(gè)錨點(diǎn)原點(diǎn)上，元件右側(cè)進(jìn)行拉伸放大。

進(jìn)度條填充色元件尺寸放大，我們只改變?cè)膶挾?，元件的高度使用初始默認(rèn)設(shè)置的即可。

所以：寬度=圓形滑塊.x+圓形滑塊.width，高度=進(jìn)度條.height

設(shè)置顏色填充一直延伸到圓形滑塊元件的右側(cè)（其實(shí)左側(cè)也是可以的，延伸到右側(cè)，是為了滑塊和進(jìn)度條之間相切的地方不會(huì)有間隙）

如下圖藍(lán)色部分示意圖：

這里用到了局部變量。

如下圖：定義一個(gè)局部變量：circle，用來指代圓形滑塊元件，在上方編輯區(qū)域，就可以通過局部變量cicrle獲取到圓形滑塊的一些數(shù)值了。

比如：circle.x，circle.width等

修改百分比進(jìn)度的文字提示，如下圖：

百分比=進(jìn)度條進(jìn)度寬度/背景總寬度。背景總寬度是固定的，所以百分比的值是依賴于進(jìn)度條寬度，而進(jìn)度條寬度是依賴于圓形滑塊拖動(dòng)的距離。

總體而言是：

圓形滑塊拖動(dòng)->進(jìn)度條填充色寬度改變->百分比文字效果改變

文字百分比計(jì)算，如下圖紅色部分所示：

這里分子分母分別都減掉了一個(gè)圓形滑塊的寬度：circle.width（circle即為圓形滑塊）

為什么要這么處理呢？（以下4步，有些繁瑣，不看也沒關(guān)系，直接使用結(jié)論就好(?_?)）

1. 限制了圓形滑塊的滑動(dòng)區(qū)間，[0，bg.width]；(bg即為灰色背景)
2. 設(shè)置了進(jìn)度條長度，process.width = circle.x+circle.width；（process即為紅色進(jìn)度條）
3. 假設(shè)使用process.width直接算百分比。當(dāng)進(jìn)度=0時(shí)，百分比= 0 = process.width/bg.width，在這里，根據(jù)條件2中，process.width = circle.x+circle.width ，百分比=0的情況，此時(shí)圓形滑塊左側(cè)與進(jìn)度圖相切circle.x=0，必須滿足circle.width=0，但是circle.width!=0，會(huì)導(dǎo)致滑塊滑動(dòng)到起點(diǎn)0的位置，但是百分比>0%。所以百分比=process.width-circle.width/bg.width；
4. 在3的條件下，即百分比=process.width-circle.width/bg.width，當(dāng)進(jìn)度=100時(shí)，百分比=1 = process.width-circle.width/bg.width，根據(jù)條件2，process.width = circle.x+circle.width，此時(shí)百分比=circle.x+circle.width-circle.width/bg.width = circle.x/bg.width，顯而易見的：circle.x<bg.width，百分比<100%，在circle.x=bg.width-circle.width;所以百分比=process.width-circle.width/bg.width-circle.width;

以上設(shè)置完，萬事大吉了嗎?

并沒有，因?yàn)橥蟿?dòng)過程中，百分比除出來的結(jié)果可能除不盡，小數(shù)點(diǎn)位數(shù)特別長長長，我們要對(duì)結(jié)果進(jìn)行保留小數(shù)位。

這里介紹幾個(gè)函數(shù)：

1. to Exponential(decimal Points)

• 用途：把數(shù)值轉(zhuǎn)換為指數(shù)計(jì)數(shù)法。
• 參數(shù)：decimal Points為保留小數(shù)的位數(shù)。

2. to Fixed(decimal Points)

• 用途：將一個(gè)數(shù)字轉(zhuǎn)為保留指定位數(shù)的小數(shù)，小數(shù)位數(shù)超出指定位數(shù)時(shí)進(jìn)行四舍五入。
• 參數(shù)：decimalPoints為保留小數(shù)的位數(shù)。

3. to Precision(length)

• 用途：把數(shù)字格式化為指定的長度。
• 參數(shù)：length為格式化后的數(shù)字長度，小數(shù)點(diǎn)不計(jì)入長度。

我們選擇第二個(gè)toFixed，保留指定小數(shù)位，并且超出部分進(jìn)行四舍五入。

這個(gè)函數(shù)怎么用呢？

例如：保留2為小數(shù)，并四舍五入，LVAR.toFixed(2)，LVAR是什么呢？

就是求出來的結(jié)果。

1. LVAR=(process.width-circle.width)*100/(bg.width-circle.width);? ?(乘以100，是換算成百分比)
2. LVAR.toFixed(2)
3. 加上變量格式[[LVAR.toFixed(2)]]
4. 加上百分比符號(hào)[[LVAR.toFixed(2)]]%
5. 最后替換上LVAR的值，[[((process.width-circle.width)*100/(bg.width-circle.width)).toFixed(2)]]%

完美~

總結(jié)

1. 拖拽的滑塊，轉(zhuǎn)換為動(dòng)態(tài)面板
2. 設(shè)置滑塊水平拖動(dòng)，設(shè)置左右邊界[0，bg.width]；
3. 設(shè)置進(jìn)度條顏色填充效果，利用設(shè)置尺寸的操作，設(shè)置左側(cè)錨點(diǎn)，寬度為circle.x+circle.width，高度為process.height；
4. 根據(jù)進(jìn)度條元件的寬度，計(jì)算進(jìn)度百分比=(process.width-circle.width)/(bg.width-circle.width)；
5. 設(shè)置百分比數(shù)值保留小數(shù)點(diǎn)位數(shù)。

以上~

本文由 @天下小雨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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