滑動(dòng)條：通過(guò)水平移動(dòng)滑塊或滑桿來(lái)控制某種變量。主要用來(lái)調(diào)節(jié)音量、屏幕亮度和修改數(shù)值逻谦。也用來(lái)滑動(dòng)解鎖和滑動(dòng)登錄咸产。
下面分享一下用Axure制作實(shí)現(xiàn)滑動(dòng)條。
?元件準(zhǔn)備? ?
1滑塊：位置坐標(biāo)（0,0）; 橢圓大猩髁辍：20*20 ; 填充顏色：#ffffff; 描邊顏色：3198FF眼虱；
2滑動(dòng)數(shù)：位置坐標(biāo)（586,3）; 字體大小：14 ; 字體顏色：#3198FF;
3背景：位置坐標(biāo)（0,7）; 矩形大邢Α：574*6 ; 填充顏色：# E4E7ED; 圓角半徑：3捏悬；
4進(jìn)度條:位置坐標(biāo)（0,7）; 形狀大小：20*6 ; 填充顏色：#3198FF; 圓角半徑：3润梯；
設(shè)置好基本參數(shù)后过牙，全部選中轉(zhuǎn)換為動(dòng)態(tài)面板?。
原理分析? ?
實(shí)現(xiàn)原理把所有原件全部選中后轉(zhuǎn)換成動(dòng)態(tài)面板【滑動(dòng)條】后仆救，藍(lán)色圓角矩形成為【進(jìn)度條】默認(rèn)面板內(nèi)的一個(gè)元件抒和。通過(guò)把【進(jìn)度條】的初始寬度設(shè)置為橢圓大小20，被位于上層的【滑塊】遮擋彤蔽，使整個(gè)進(jìn)度槽看起來(lái)是空的摧莽。隨著滑塊不斷拖動(dòng)，使【進(jìn)度條】寬度不斷變大顿痪，藍(lán)色矩形被顯示出來(lái)的區(qū)域增多镊辕，直至當(dāng)【進(jìn)度條】的寬度等于【背景】的時(shí)候，藍(lán)色矩形就全部被顯示出來(lái)了蚁袭，使整個(gè)進(jìn)度槽看起來(lái)被填充完成征懈。期間【進(jìn)度條】和【滑動(dòng)數(shù)】是關(guān)聯(lián)進(jìn)行的，根據(jù)【進(jìn)度條】的寬度計(jì)算出【滑動(dòng)數(shù)】的數(shù)值揩悄，用于表示當(dāng)前的進(jìn)度情況卖哎。
邏輯流程
1. 移動(dòng)【滑塊】，移動(dòng)方式設(shè)置成“水平拖動(dòng)”，必須添加界限亏娜，否則滑塊會(huì)無(wú)限制拖動(dòng)焕窝。
2. 設(shè)置左側(cè)邊界的X軸坐標(biāo)大于等于（【背景】的橫坐標(biāo)）
3. 右側(cè)邊界的X軸坐標(biāo)小于等于（【背景】的寬度+【背景】的橫坐標(biāo)）
4. 設(shè)置【進(jìn)度條】高度為【進(jìn)度條】的初始高度6
5. 設(shè)置【進(jìn)度條】寬度等于（【滑塊】的橫坐標(biāo)+【進(jìn)度條】的初始寬度）
6. 設(shè)置【滑動(dòng)數(shù)】的大小等于(【滑動(dòng)條的寬度】-20)/(【背景的寬度】-20)
轉(zhuǎn)換成原型中的函數(shù)為：
[[Math.ceil((LVAR1.width-20)/(LVAR2.width-20)*100)]]%
設(shè)置用例
原型演示地址：https://b9el2o.axshare.com
下載鏈接:https://pan.baidu.com/s/1zaHurZkjfAdYBwNKBfPnLw??
密碼:h1kc
參考函數(shù)
math.ceil(x)：向上取整函數(shù)，返回大于或等于參數(shù)x维贺，并且與之最接近的整數(shù)它掂。math.ceil(1.2)=2；math.floor(x)：向下取整函數(shù)溯泣，返回小于或等于參數(shù)x虐秋，并且與之最接近的整數(shù)。math.floor(1.2)=1垃沦。
