怎樣用Axure實現拖動進度條？一起來看下吧~
可拖動進度條的應用場景，例如調節APP屏幕亮度，音樂播放器的音量等。
效果如下(●ˇ∀ˇ●)
準備4個元件，如下所示：
- 一個圓形滑塊；（用於觸摸滑動）
- 一個矩形元件，填充色為灰色，改為圓角矩形；（作為進度條的底部背景色）
- 從2複製一個同樣的圓角矩形元件，將填充色改為其他顏色；（作為進度提示的填充色）
- 一個文字元件。（顯示百分比進度）
將2、3兩個圓角矩形元件重疊，需要嚴絲合縫的重疊，設置x值和y值一致。
設置填充色元件的width=0；因為初始狀態進度是0的~
然後將圓形滑塊與進度條左側對齊，佈局調整為一個進度條該有的樣子 ，如下圖：
到這裡，可以F5欣賞一下UI效果(。・∀・)ノ
咦，圓形元件，為什麼無法拖拽？說好的自由拖拽呢？
動態面板是唯一一個能夠被拖動的元件，任何元件想要達到拖動的效果，必須放在動態面板中。並且，在動態面板的觸發事件“拖動時”當中設置用例。所以要達到自由拖拽的效果，必須是動態面板，其他元件是沒有這個功能的。
將圓形元件轉換為動態面板：選中元件，點擊右鍵>轉換為動態面板，動態面板的觸發事件“拖動時”中，添加用例。
用例包含下列動作：
圓形滑塊設置水平拖動，並且設置滑動拖動的左右邊界，限制其拖動邊界不超過bg背景元件的左右兩側。
圓形滑塊轉為動態面板後，在面板狀態中，其位置是從（0，0）開始的，所以滑動範圍是從0開始，即左側left>=0，限制滑動最大距離不超過進度條灰色元件的寬度，即右側right<=背景.width
進度條process跟隨動態面板拖拽實現顏色填充。這裡通過修改進度條的尺寸，實現填充色的前進進度。
如下圖：
這裡不得不提的就是錨點，anchor 左側，表示以該點作為作為原點，進行移動操作。
什麼意思呢？
就是選擇了左側作為錨點，那麼進度條填充色這個元件，左側就是固定在這個錨點原點上，元件右側進行拉伸放大。
進度條填充色元件尺寸放大，我們只改變元件的寬度，元件的高度使用初始默認設置的即可。
所以：寬度=圓形滑塊.x+圓形滑塊.width，高度=進度條.height
設置顏色填充一直延伸到圓形滑塊元件的右側（其實左側也是可以的，延伸到右側，是為了滑塊和進度條之間相切的地方不會有間隙）
如下圖藍色部分示意圖：
這裡用到了局部變量 。
如下圖：定義一個局部變量：circle，用來指代圓形滑塊元件，在上方編輯區域，就可以通過局部變量cicrle獲取到圓形滑塊的一些數值了。
比如：circle.x，circle.width等
修改百分比進度的文字提示，如下圖：
百分比=進度條進度寬度/背景總寬度。背景總寬度是固定的，所以百分比的值是依賴於進度條寬度，而進度條寬度是依賴於圓形滑塊拖動的距離。
總體而言是：
圓形滑塊拖動->進度條填充色寬度改變->百分比文字效果改變
文字百分比計算，如下圖紅色部分所示：
這裡分子分母分別都減掉了一個圓形滑塊的寬度：circle.width（circle即為圓形滑塊）
為什麼要這麼處理呢？（以下4步，有些繁瑣，不看也沒關係，直接使用結論就好(⓿_⓿)）
- 限制了圓形滑塊的滑動區間，[0，bg.width]；(bg即為灰色背景)
- 設置了進度條長度，process.width = circle.x+circle.width；（process即為紅色進度條）
- 假設使用process.width直接算百分比。當進度=0時，百分比= 0 = process.width/bg.width，在這裡，根據條件2中，process.width = circle.x+circle.width ，百分比=0的情況，此時圓形滑塊左側與進度圖相切circle.x=0，必須滿足circle.width=0，但是circle.width!=0，會導致滑塊滑動到起點0的位置，但是百分比>0%。所以百分比=process.width-circle.width/bg.width；
- 在3的條件下，即百分比=process.width-circle.width/bg.width，當進度=100時，百分比=1 = process.width-circle.width/bg.width，根據條件2，process.width = circle.x+circle.width，此時百分比=circle.x+circle.width-circle.width/bg.width = circle.x/bg.width，顯而易見的：circle.x
以上設置完，萬事大吉了嗎?
並沒有，因為拖動過程中，百分比除出來的結果可能除不盡，小數點位數特別長長長，我們要對結果進行保留小數位。
這裡介紹幾個函數：
1. to Exponential(decimal Points)
- 用途：把數值轉換為指數計數法。
- 參數：decimal Points為保留小數的位數。
2. to Fixed(decimal Points)
- 用途：將一個數字轉為保留指定位數的小數，小數位數超出指定位數時進行四捨五入。
- 參數：decimalPoints為保留小數的位數。
3. to Precision(length)
- 用途：把數字格式化為指定的長度。
- 參數：length為格式化後的數字長度，小數點不計入長度。
我們選擇第二個toFixed，保留指定小數位，並且超出部分進行四捨五入。
這個函數怎麼用呢？
例如：保留2為小數，並四捨五入，LVAR.toFixed(2)，LVAR是什麼呢？
就是求出來的結果。
- LVAR=(process.width-circle.width)*100/(bg.width-circle.width); (乘以100，是換算成百分比)
- LVAR.toFixed(2)
- 加上變量格式[[LVAR.toFixed(2)]]
- 加上百分比符號[[LVAR.toFixed(2)]]%
- 最後替換上LVAR的值，[[((process.width-circle.width)*100/(bg.width-circle.width)).toFixed(2)]]%
完美~
總結
- 拖拽的滑塊，轉換為動態面板
- 設置滑塊水平拖動，設置左右邊界[0，bg.width]；
- 設置進度條顏色填充效果，利用設置尺寸的操作，設置左側錨點，寬度為circle.x+circle.width，高度為process.height；
- 根據進度條元件的寬度，計算進度百分比=(process.width-circle.width)/(bg.width-circle.width)；
- 設置百分比數值保留小數點位數。
以上~
題圖來自Unsplash，基於CC0協議。
閱讀更多 人人都是產品經理 的文章
