Axure是一種強(qiáng)大的原型設(shè)計(jì)工具，可以幫助設(shè)計(jì)師快速創(chuàng)建交互式原型。在這篇文章中，我們將學(xué)習(xí)如何使用Axure制作一個控件，使其能夠跟隨鼠標(biāo)移動。新建方框和熱區(qū)首先，在Axure中新建一個“方框”和

Axure是一種強(qiáng)大的原型設(shè)計(jì)工具，可以幫助設(shè)計(jì)師快速創(chuàng)建交互式原型。在這篇文章中，我們將學(xué)習(xí)如何使用Axure制作一個控件，使其能夠跟隨鼠標(biāo)移動。

新建方框和熱區(qū)

首先，在Axure中新建一個“方框”和一個“熱區(qū)”。分別給它們命名為“方框”和“熱區(qū)”。設(shè)定“方框”的大小為280*380，而“熱區(qū)”的大小為100*100。

移動過程設(shè)置

我們需要給“方框”設(shè)置一個“命中”狀態(tài)，并用虛線狀態(tài)來區(qū)別移動過程。根據(jù)下圖所示的步驟進(jìn)行設(shè)置。

鼠標(biāo)點(diǎn)擊時的動作設(shè)置

1. 移動“熱區(qū)”到指定位置（x, y），以鼠標(biāo)的絕對位置為參考。例如：x[[Cursor.x-50]], y[[Cursor.y-50]]。

2. 移動“方框”到指定位置（x, y），以鼠標(biāo)的絕對位置為參考。例如：x[[Cursor.x-140]], y[[Cursor.y-190]]。

3. 設(shè)置“方框”為“選中”狀態(tài)。

鼠標(biāo)移動時的動作設(shè)置

1. 移動“熱區(qū)”到指定位置（x, y），以鼠標(biāo)的絕對位置為參考。例如：x[[Cursor.x-50]], y[[Cursor.y-50]]。

2. 移動“方框”到指定位置（x, y），以鼠標(biāo)的絕對位置為參考。例如：x[[Cursor.x-140]], y[[Cursor.y-190]]。

3. 設(shè)置“方框”為“選中”狀態(tài)。

鼠標(biāo)點(diǎn)擊時的動作設(shè)置

1. 移動“熱區(qū)”到指定位置（x, y），任意位置，比如：x0, y0。

2. 設(shè)置“方框”為“未選中”狀態(tài)。

查看效果

當(dāng)你在“方框”的范圍內(nèi)點(diǎn)擊鼠標(biāo)后，“方框”將會跟隨鼠標(biāo)移動。再次點(diǎn)擊鼠標(biāo)，“方框”將停止移動。通過以上設(shè)置，我們成功實(shí)現(xiàn)了控件跟隨鼠標(biāo)移動的效果。

這種交互式效果對于網(wǎng)頁設(shè)計(jì)和應(yīng)用程序開發(fā)非常有用。Axure為我們提供了一個簡單而強(qiáng)大的工具，來創(chuàng)建出色的用戶體驗(yàn)。希望本文對你理解Axure制作控件跟隨鼠標(biāo)移動效果有所幫助！