如何在Axure中，實(shí)現(xiàn)鼠標(biāo)按住時(shí)，散開(kāi)改變按鈕顏色？一起來(lái)本文中看看~

首先我們來(lái)看一下簡(jiǎn)陋效果（是真的非常簡(jiǎn)陋）：

請(qǐng)手動(dòng)無(wú)視最后一次，gif上傳后出現(xiàn)的未知問(wèn)題

接下來(lái)我們聊一下如何實(shí)現(xiàn)這個(gè)效果，首先我們需要一個(gè)動(dòng)態(tài)面板：

動(dòng)態(tài)面板狀態(tài)里面我們需要它們：

然后我們把它們擺成這個(gè)樣子（簡(jiǎn)易例子，就用方框替代，圓就隨便放就好了）：

圓的大小我設(shè)成了50*50（可以按喜好更改），此處以遮罩舉例，所以我設(shè)了黑色以及不透明度50（也可以改啦），然后我們隱藏掉這個(gè)小圈圈。

接下來(lái)就是用例了~要對(duì)動(dòng)態(tài)面板設(shè)置(*^▽^*)。

（1）鼠標(biāo)按鍵按下時(shí)

把小圈圈移到鼠標(biāo)位置，顯示小圈圈，然后改變它的大?。?/p>

移動(dòng)：使中心在鼠標(biāo)位置

顯示：就是讓它出來(lái)啦

改變大?。菏切Ч闹攸c(diǎn)啦，要以中心為固定點(diǎn)~

這里我們用了一個(gè)函數(shù)，設(shè)置按照下圖哦：

（2）鼠標(biāo)按鍵釋放時(shí)

隱藏掉小圈圈，然后再把它變回之前的大小

這個(gè)小圈圈以哪里作為中心點(diǎn)都可以的，變回原來(lái)大小是為了保證每次出現(xiàn)都在鼠標(biāo)位置，因?yàn)橹俺霈F(xiàn)位置是鼠標(biāo)位置減掉25呀~

噠噠，大功告成，可以預(yù)覽了，就是開(kāi)頭的效果啦。如果大家有更好的解決方案歡迎來(lái)教我呀~

接下來(lái)是它↓

1. 這是一個(gè)簡(jiǎn)陋到不能再簡(jiǎn)陋的例子，是可以擴(kuò)展的！
2. 如果想改變底紋顏色，可以把小圈圈（當(dāng)然也可以橢圓）的位置變成文字和原底紋之間
3. 如果動(dòng)態(tài)面板不在（0,0）需要在改變小圈圈位置的時(shí)候再減去動(dòng)態(tài)面板的坐標(biāo)噢（！重點(diǎn)）
4. 源文件：https://pan.baidu.com/s/1tnJpXdCf_qDpqxyr3hM9rw 提取碼：eq89

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

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