Axure怎么制作模擬地圖放大效果?

使用"百度地圖"時(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 RP怎么設(shè)計(jì)一款導(dǎo)航菜單?
axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件?
相關(guān)文章
Axure怎么設(shè)計(jì)點(diǎn)贊的百分比進(jìn)度條?
Axure怎么設(shè)計(jì)點(diǎn)贊的百分比進(jìn)度條?網(wǎng)頁(yè)中經(jīng)常有點(diǎn)贊投票的,想要顯示點(diǎn)贊投票的數(shù)據(jù)百分比進(jìn)度條,該怎么設(shè)計(jì)恩?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-08-16Axure怎么制作百分比的進(jìn)度條動(dòng)畫(huà)?
Axure怎么制作百分比的進(jìn)度條動(dòng)畫(huà)?Axure中想要制作百分比的進(jìn)度條,該怎么制作進(jìn)度條并添加動(dòng)畫(huà)效果恩?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-08-15- axure簡(jiǎn)單的流程圖怎么繪制?axure設(shè)計(jì)網(wǎng)頁(yè)原型很方便,想要設(shè)計(jì)流程圖該怎么設(shè)計(jì)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-07-27
Axure怎么設(shè)計(jì)網(wǎng)頁(yè)強(qiáng)密碼驗(yàn)證效果?
Axure怎么設(shè)計(jì)網(wǎng)頁(yè)強(qiáng)密碼驗(yàn)證效果?現(xiàn)在網(wǎng)頁(yè)的密碼越來(lái)越復(fù)雜,想要制作一個(gè)密碼驗(yàn)證,該怎么制作這個(gè)網(wǎng)頁(yè)圓形呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-07-17- axure怎么設(shè)計(jì)QQ登錄界面交互效果?axure中設(shè)計(jì)網(wǎng)頁(yè)原型很簡(jiǎn)單,該怎么設(shè)計(jì)qq登陸的頁(yè)面呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-07-17
Axure網(wǎng)頁(yè)怎么添加樹(shù)狀控件?
Axure網(wǎng)頁(yè)怎么添加樹(shù)狀控件?Axure中想要直走樹(shù)狀的折疊菜單,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,很簡(jiǎn)單,需要的朋友可以參考下2018-07-06- Axure怎么創(chuàng)建母版和使用?Axure中母版是經(jīng)常會(huì)用的,該怎么創(chuàng)建母版呢?下面我們就來(lái)看看axure創(chuàng)建母版的教程,需要的朋友可以參考下2018-07-04
Axure怎么制作控件隨鼠標(biāo)移動(dòng)的效果?
Axure怎么制作控件隨鼠標(biāo)移動(dòng)的效果?Axure中創(chuàng)建的方框和熱區(qū)想要制作跟隨鼠標(biāo)移動(dòng)的效果,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-07-04axure下拉框光標(biāo)閃動(dòng)效果怎么制作?
axure下拉框光標(biāo)閃動(dòng)效果怎么制作?很多網(wǎng)頁(yè)下拉輸入框中光標(biāo)都是閃爍的,等待輸入的效果,該怎么制作這個(gè)效果呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-06-28- Axure RP怎么制作彈出菜單的效果?Axure中制作網(wǎng)頁(yè)原型很簡(jiǎn)單,想要制作一個(gè)彈出式的菜單,該怎么弄制作這個(gè)效果呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-06-26