Axure中想要實(shí)現(xiàn)一個(gè)效果，就是當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)，展示放大的圖片細(xì)節(jié)，該怎么制作局部放大效果呢？下面我們就來看看詳細(xì)的教程。

原型設(shè)計(jì)工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊(cè)碼+安裝教程)

• 類型：輔助設(shè)計(jì)
• 大?。?/span>90.5MB
• 語言：簡(jiǎn)體中文
• 時(shí)間：2018-05-24

查看詳情

新建一圖片，導(dǎo)入喜歡的圖，命名為pic，尺寸為400*250；（圖片尺寸可自定義，展示受限百度限制）

新建一”矩形“，命名為board，尺寸為200*125；并設(shè)定填充顏色為#00FF00，不透明：20%；設(shè)置為“隱藏”；置于”圖片：pic”上方；如下圖所示：

選擇“矩形：board”，“圖片：pic”，組合，命名為area

另新建一“動(dòng)態(tài)面板”，命名為display，尺寸為400*250；插入一張新圖，命名為bigpic，尺寸為800*500；設(shè)置“動(dòng)態(tài)面板：display“為”隱藏“；

布局如下圖所示：

以下分別設(shè)置”組合：area“的”鼠標(biāo)移動(dòng)時(shí)“和”鼠標(biāo)移出時(shí)“的交互的動(dòng)作~

先是簡(jiǎn)單的”鼠標(biāo)移出時(shí)“的交互動(dòng)作：

隱藏”動(dòng)態(tài)面板：display“；

隱藏”矩形：board“；

”鼠標(biāo)移動(dòng)時(shí)“的交互動(dòng)作：

動(dòng)作1:

顯示”動(dòng)態(tài)面板：display“；

顯示”矩形：board“；

動(dòng)作2：

移動(dòng)”矩形：board“；

設(shè)置移動(dòng)的界限；

其中，移動(dòng)設(shè)置為“到達(dá)”；

設(shè)置X值為[[Cursor.x-Target.width/2]]，Y值為[[Cursor.y-Target.height/2]]；如下圖所示：

界限以“圖片：pic”上下左右為界，并設(shè)置“圖片：pic”為局部變量LVAR1；所以，

頂部大于[[LVAR1.top]]；

底部小于[[LVAR1.bottom]]；

右側(cè)小于[[LVAR1.right]]；

左側(cè)大于[[LVAR1.left]]；

動(dòng)作3：移動(dòng)”圖形：bigpic“；設(shè)置移動(dòng)的界限；

其中，移動(dòng)設(shè)置為“到達(dá)”；

設(shè)置“動(dòng)態(tài)面板：board”為局部變量LVAR1，“圖片：pic”為局部變量LVAR2；所以，X值為[[(LVAR2.x-LVAR1.x)*2]]，Y值為[[(LVAR2.y-LVAR1.y)*2]]；如下圖所示：

設(shè)置“動(dòng)態(tài)面板：display”為局部變量LVAR1，“圖片：bigpic”為局部變量LVAR2；所以移動(dòng)的界限，

頂部大于[[LVAR1.height-LVAR2.height]]；

左側(cè)大于[[LVAR1.width-LVAR2.width]]；

恩，別看設(shè)置交互動(dòng)作不多~但也挺搞腦筋的，來看看最后的效果吧。

相比，我更喜歡下面這個(gè)效果，不知看官，能實(shí)現(xiàn)嗎？（很簡(jiǎn)單的哦~）

以上就是Axure圖片局部放大的制作方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

Axure RP 8怎么設(shè)置樹狀菜單?

Axure RP 8怎么模擬手機(jī)界面顯示應(yīng)用圖標(biāo)的效果?

Axure怎么導(dǎo)入本地的按鈕? Axure打開本地文件的技巧

最新評(píng)論