使用"百度地圖"時(shí)，會(huì)使用到放大縮小功能，并能拖動(dòng)地圖瀏覽，既然前些天有介紹過(guò)圖片“放大”預(yù)覽的功能，利用其實(shí)現(xiàn)方式，今天我們就來(lái)看看使用Axure來(lái)模擬做下“地圖”控件的教程，請(qǐng)看下文詳細(xì)介紹。

1、新建一張圖，命名為pic，尺寸為600*375；（建議可導(dǎo)入一張高清大圖，縮小尺寸后，使用）

2、點(diǎn)中此”圖片：pic“，鼠標(biāo)右鍵，選擇“轉(zhuǎn)換為動(dòng)態(tài)面板”

3、命名為此動(dòng)態(tài)面板為“display”，并勾選為“自動(dòng)調(diào)整為內(nèi)容尺寸”；

4、再次點(diǎn)中“動(dòng)態(tài)面板：display”，鼠標(biāo)右鍵，選擇“轉(zhuǎn)換為動(dòng)態(tài)面板”，并命名新的動(dòng)態(tài)面板為“area”；

5、新建3個(gè)矩形，分別命名為1X，2X，3X，尺寸為60*30；設(shè)置其填充色：#00FF00，不透明度：20%；設(shè)置矩形內(nèi)容分別為1:1，1:2，1:3,布局如下圖所示：

6、到這里，基本布局就結(jié)束了，以下是圖片放大的動(dòng)態(tài)交互~

7、“矩形：1X”的“鼠標(biāo)點(diǎn)擊時(shí)”的動(dòng)作：

設(shè)置“圖片：pic”尺寸為600*375

其中，寬為600，高位375；錨點(diǎn)：中心；動(dòng)畫(huà)：無(wú)

8、“矩形：2X”的“鼠標(biāo)點(diǎn)擊時(shí)”的動(dòng)作：

設(shè)置“圖片：pic”尺寸為1200*750其中，寬為1200，高位750；錨點(diǎn)：中心；動(dòng)畫(huà)：無(wú)

9、“矩形：3X”的“鼠標(biāo)點(diǎn)擊時(shí)”的動(dòng)作：

設(shè)置“圖片：pic”尺寸為1800*1125，其中，寬為1800，高位1125；錨點(diǎn)：中心；動(dòng)畫(huà)：無(wú)

10、另還需要設(shè)置“動(dòng)態(tài)面板：display”的“拖動(dòng)時(shí)”的交互動(dòng)作.主要是要限定拖動(dòng)時(shí)的界限；

11、移動(dòng)“動(dòng)態(tài)面板：display”

12、其中，設(shè)置移動(dòng)：拖動(dòng)；動(dòng)畫(huà)：無(wú)

13、設(shè)置“圖片：pic”為局部變量LVAR1；設(shè)置“動(dòng)態(tài)面板：area”為局部變量LVAR2；所以界限為：

底部小于等于[[LVAR1.height]]；

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

頂部大于等于[[(LVAR2.height-LVAR1.height)/2]]；

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

14、ok~，簡(jiǎn)單設(shè)置好后，效果就出來(lái)了，是不是超級(jí)簡(jiǎn)單~哈哈

15、但是，看官別急！多操作幾次后，就會(huì)發(fā)現(xiàn)，當(dāng)縮小圖片時(shí)圖片不見(jiàn)了。

以上就是Axure模擬地圖放大效果的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

axure中的單元格怎么合并?

Axure RP怎么設(shè)計(jì)一款導(dǎo)航菜單?

axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件?

最新評(píng)論