怎樣用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協議。