移動(dòng)鼠標(biāo)放大縮小圖片在原型設(shè)計(jì)的時(shí)候算是很常用的功能，如何在Axure中實(shí)現(xiàn)呢？這篇文章給你解答。

關(guān)鍵步驟1：

底層是圖片，第二層是小矩形；小矩形隨著鼠標(biāo)進(jìn)行移動(dòng)，圖片上加交互效果：鼠標(biāo)移動(dòng)。

以鼠標(biāo)作為中心點(diǎn)，小矩形的X Y點(diǎn)在 鼠標(biāo)X-小矩形寬度/2 ，鼠標(biāo)Y-小矩形高度/2。

因這樣的設(shè)計(jì)導(dǎo)致鼠標(biāo)在小矩形內(nèi)部時(shí)無(wú)法生效，需要將鼠標(biāo)移出小矩形外部才能生效，此時(shí)需要在圖片與小矩形上加一個(gè)頂層：大矩形，同時(shí)將大矩形填充色的透明度設(shè)置為0%

此時(shí)鼠標(biāo)在大矩形上移動(dòng)就會(huì)帶著小矩形移動(dòng)

關(guān)鍵步驟2：

1.設(shè)置邊界，令小矩形不會(huì)在大矩形外部活動(dòng)，即使超出會(huì)自動(dòng)回到大矩形對(duì)應(yīng)的位置

2.對(duì)小矩形加交互效果：加判斷條件

頂部：

If 小矩形TOP<大矩形TOP（條件中無(wú)法用target這個(gè)元件，同時(shí)多個(gè)元件存在時(shí)，不建議用target 直接用局部變量替代更加方便）

分析：此時(shí)小矩形的X不需要變，僅有Y需要變化

執(zhí)行 小矩形X=小矩形X；小矩形Y=大矩形TOP

左邊部：

If 小矩形Left<大矩形left（條件中無(wú)法用target這個(gè)元件，同時(shí)多個(gè)元件存在時(shí)，不建議用target 直接用局部變量替代更加方便）

分析：此時(shí)小矩形的Y不需要變，僅有X需要變化

執(zhí)行 小矩形X=大矩形的left；小矩形Y=小矩形Y

底部：

If 小矩形bottom>大矩形bottom（條件中無(wú)法用target這個(gè)元件，同時(shí)多個(gè)元件存在時(shí)，不建議用target 直接用局部變量替代更加方便）

分析：此時(shí)小矩形的X不需要變，僅有Y需要變化

執(zhí)行 小矩形X=小矩形X；小矩形Y=大矩形bottom-小矩形高度

右部：

If 小矩形right>大矩形right（條件中無(wú)法用target這個(gè)元件，同時(shí)多個(gè)元件存在時(shí)，不建議用target 直接用局部變量替代更加方便）

分析：此時(shí)小矩形的Y不需要變，僅有X需要變化

執(zhí)行 小矩形X=大矩形right-小矩形寬度；小矩形Y=小矩形Y

注意：選擇局部變量時(shí)，注意查看選擇局部變量的屬性，選錯(cuò)就導(dǎo)致交互效果出錯(cuò)

關(guān)鍵步驟3：

• 圖片隨著鼠標(biāo)移動(dòng)右側(cè)顯示圖片放大效果，右側(cè)新建動(dòng)態(tài)面板
• 此時(shí)小矩形與動(dòng)態(tài)面板是一類，原始圖片與放大圖片是一類
• 如小矩形為160*160.原始圖片為400*400，設(shè)置動(dòng)態(tài)面板也為400*400，那么此時(shí)放大圖片的大小應(yīng)該為 160/400=400/?,?=1000,放大圖片大小為1000*1000
• 放大效果的實(shí)現(xiàn)邏輯：小矩形往由移動(dòng)==放大圖片往左移動(dòng)，小矩形的移動(dòng)距離計(jì)算：

小矩形X距離=小矩形left-大矩形left；小矩形Y距離=小矩形top-大矩形top；

• 小矩形與放大圖片的聯(lián)系就是：大矩形與小矩形的比例=要呈現(xiàn)的圖片的比例，即400/160=2.5，即小矩形移動(dòng)距離*（-2.5）=要呈現(xiàn)的圖片的距離（左移）
• 在小矩形上加交互效果：

移動(dòng)時(shí)：

令動(dòng)態(tài)面板中的放大圖片進(jìn)行移動(dòng)：X=-（小矩形left-大矩形left）*2.5；Y=-（小矩形top-大矩形top）*2.5

注意：條件要設(shè)置為IF

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

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