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

音量滑塊控件如何制作呢？來(lái)看作者多圖為你解答。

首先我們來(lái)看下效果：

在這個(gè)音量條中除了常規(guī)的滑塊操作，還需要根據(jù)當(dāng)前的進(jìn)度改變左側(cè)音量圖標(biāo)。

元件繪制

我們先來(lái)看下都得需要畫哪些元件：

左側(cè)的音量圖標(biāo)是一個(gè)有4個(gè)狀態(tài)的動(dòng)態(tài)面板，其他的看圖片你們應(yīng)該可以看懂！

交互邏輯

讓我們明確下交互的邏輯，知道接下來(lái)我們要做些什么。交互是在拖動(dòng)滑塊時(shí)發(fā)生的變化，所以交互需要做在滑塊上！除了拖動(dòng)時(shí)，還需要載入時(shí)對(duì)元件進(jìn)行初始化顯示。

滑塊拖動(dòng)

我們先看拖動(dòng)滑塊時(shí)的交互，首先我們需要讓這個(gè)滑塊可以拖動(dòng)，但是只有動(dòng)態(tài)面板才可以拖動(dòng)，所以我們需要先將滑塊轉(zhuǎn)化為動(dòng)態(tài)面板，之后的交互都是做在這個(gè)滑塊動(dòng)態(tài)面板上的。

元件→移動(dòng)?當(dāng)前元件移動(dòng)[水平拖動(dòng)]，只有滑塊就可以只左右拖動(dòng)了，但還需要限制它的左右拖動(dòng)范圍。左邊界：[[max.x]]；右邊界：[[max.x+max.width]]。

可能有些同學(xué)對(duì)右邊界的設(shè)置有些迷糊，這里圖解一下~

左側(cè)的x坐標(biāo)為0，max.x就是左側(cè)到當(dāng)前x坐標(biāo)的寬度，也就是紅色區(qū)域。紅色區(qū)域加上藍(lán)色區(qū)域，就可以得到綠色區(qū)域，也就是右邊界的x坐標(biāo)了。

當(dāng)前音量進(jìn)度

元件→設(shè)置尺寸?now(矩形)將當(dāng)前音量進(jìn)度的寬度設(shè)置為[[This.x-max.x]]

當(dāng)前音量文本

元件→設(shè)置文本?volume(矩形)設(shè)置當(dāng)前音量文本的值為[[(now.width/(max.width-This.width)*100).toFixed(0)]]

在拖動(dòng)到最后側(cè)時(shí)，實(shí)際上是沒有拖到max完成寬度的，而是拖到了max寬度-滑塊寬度的位置。所以實(shí)際的音量上限寬度應(yīng)該是max.width-This.width。

當(dāng)前寬度/上限寬度的出的是當(dāng)前占上限寬度的小數(shù)百分比，乘以100之后就是我們需求的0-100的數(shù)值范圍了，可是后面還有很多很多的小數(shù)點(diǎn)。

在這里我們需要學(xué)習(xí)一個(gè)函數(shù)：

[[LVAR.toFixed(decimalPoints)]]

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

（此處引用小樓老師Axure RP8函數(shù)速查表文檔內(nèi)容）

音量icon&初始化

音量icon的切換是根據(jù)當(dāng)前音量上的文字進(jìn)行判斷的，注意圖中的if與else if，在if/else if處右鍵可以切換。if是挨個(gè)進(jìn)行判斷的，else if是如果沒滿足上面的條件，就會(huì)進(jìn)入else if，滿足了就跳過(guò)else if。

最后，將設(shè)置當(dāng)前音量進(jìn)度和當(dāng)前音量文本的交互直接粘貼到載入時(shí)就完成啦~

icon靜音與恢復(fù)

正在我打算保存寫完的教程時(shí)，突然發(fā)現(xiàn)不太完美！還差一個(gè)點(diǎn)icon靜音/恢復(fù)的交互。

點(diǎn)擊icon時(shí)，如果當(dāng)前的狀態(tài)不是音量無(wú)，則需要先用全局變量記錄下靜音之前的面板，然后再靜音。如果現(xiàn)在已經(jīng)是靜音了，那就要調(diào)用之前記下來(lái)的變量，將動(dòng)態(tài)面板的狀態(tài)恢復(fù)至之前的狀態(tài)。

嗯，這下是真的大！功！告！成！

作者：Synmo夢(mèng)兒，公眾號(hào)：夢(mèng)話Axure

本文由 @Synmo夢(mèng)兒? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 pexels，基于 CC0 協(xié)議