使用Axure制作控件跟隨鼠標(biāo)移動(dòng)效果

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

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

新建方框和熱區(qū)

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

移動(dòng)過程設(shè)置

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

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

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

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

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

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

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

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

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

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

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

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

查看效果

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

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