中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

怎樣用Axure實現拖動進度條？一起來看下吧~

可拖動進度條的應用場景，例如調節APP屏幕亮度，音樂播放器的音量等。

效果如下(●ˇ?ˇ●)

準備4個元件，如下所示：

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

將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步，有些繁瑣，不看也沒關系，直接使用結論就好(?_?)）

1. 限制了圓形滑塊的滑動區間，[0，bg.width]；(bg即為灰色背景)
2. 設置了進度條長度，process.width = circle.x+circle.width；（process即為紅色進度條）
3. 假設使用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；
4. 在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<bg.width，百分比<100%，在circle.x=bg.width-circle.width;所以百分比=process.width-circle.width/bg.width-circle.width;

以上設置完，萬事大吉了嗎?

并沒有，因為拖動過程中，百分比除出來的結果可能除不盡，小數點位數特別長長長，我們要對結果進行保留小數位。

這里介紹幾個函數：

1. to Exponential(decimal Points)

• 用途：把數值轉換為指數計數法。
• 參數：decimal Points為保留小數的位數。

2. to Fixed(decimal Points)

• 用途：將一個數字轉為保留指定位數的小數，小數位數超出指定位數時進行四舍五入。
• 參數：decimalPoints為保留小數的位數。

3. to Precision(length)

• 用途：把數字格式化為指定的長度。
• 參數：length為格式化后的數字長度，小數點不計入長度。

我們選擇第二個toFixed，保留指定小數位，并且超出部分進行四舍五入。

這個函數怎么用呢？

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

就是求出來的結果。

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

完美~

總結

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

以上~

本文由 @天下小雨 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。