Axure怎么制作控制條控制地圖放大效果?
我要評論axure中制作地圖放大效果很方便，想要添加一個控制條控制圖片，不僅僅只是固定的倍率，這次要用“拉桿”滑動的方式，來線性發(fā)大“地圖”，下面我們就來看看詳細的教程，具體效果如下圖。
Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機+漢化包+安裝教程)
- 類型：輔助設(shè)計
- 大?。?/span>83.2MB
- 語言：簡體中文
- 時間：2019-04-26
首先，導入上一次設(shè)計完成的“地圖”控件，如不明白的地方，
當然，“文本標簽：X”，“文本標簽：Y”，“矩形：1X”，“矩形：2X”，“矩形：3X”可以做隱藏處理~
另新建兩個“文本標簽”；1.命名為“ratio”，設(shè)置為隱藏；2.命名為"describe"，設(shè)置內(nèi)容為"放大比率：1X"；
新建一矩形，尺寸為600*9；
新建一“動態(tài)面板”，尺寸為20*30，命名為“handle”，背景顏色為#00FF00；
新建的控件，布局如下：
主要的交互在于“動態(tài)面板：handle”，“圖片（地圖）”的拖動，在上兩篇設(shè)計中，都有涉及，沒有什么變化，主要是控制“圖片（地圖）”的拖動邊界即可，這里不再贅述~
以下，就針對“動態(tài)面板：handle”的“拖動時”的交互，做具體說明~
Case1的交互動作：
動作1
拖動“動態(tài)面板：handle”；移動方式：水平拖動；動畫：無；
其中，“元件：矩形”為局部變量LVAR1；
所以界限，左側(cè)大于等于“[[LVAR1.left]]”，右側(cè)小于等于“[[LVAR1.right]]”；
動作2
設(shè)置“文本標簽：ratio”的值
其中，“動態(tài)面板：handle”為局部變量LVAR1，“元件：矩形”為局部變量LVAR2；所以，“文本標簽：ratio”的值為“[[(((LVAR1.x-LVAR2.x)/(LVAR2.width-lvar1.width)+0.25)*4).toFixed(2)]]”
動作3
設(shè)置“文本標簽：describe”的值
相關(guān)文章
Axure RP 8對象怎么組合和取消組合？Axure RP 8中的元素需要組合到一起，該怎么組合或者取消組合呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-17
Axure RP 8怎么設(shè)計注冊頁面的網(wǎng)頁原型?
Axure RP 8怎么設(shè)計注冊頁面的網(wǎng)頁原型？很多網(wǎng)站都會有注冊頁面，想要設(shè)計一款注冊頁面，該怎么設(shè)計呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-15
Axure RP 8怎么使用按鈕控制圖片的顯示或隱藏？Axure中想要制作單擊按鈕觸發(fā)圖片顯示出來的效果，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-15
Axure怎么繪制柱狀圖圖形？Axure中想要繪制一個柱狀圖，該怎么繪制呢？下面我們就來看看Axure繪制柱狀圖的教程，很簡單，需要的朋友可以參考下2018-01-14
Axure RP8怎么導入RP文件? Axure導入本地RP文件的教程
Axure RP8怎么導入RP文件？Axure RP8設(shè)計模型很簡單，想要將本地的RP文件文件導入到axure中，該怎么導入呢？下面我們就來看看Axure導入本地RP文件的教程，需要的朋友可以參2018-01-14
Axure怎么做表格隨著鼠標移動改變顏色？Axure中的表格當鼠標選中某行的時候，顏色發(fā)生變化，鼠標移開以后表格恢復原來顏色，下面我們就來看看詳細的教程，需要的朋友可以參2018-01-11
Axure怎么導入本地的按鈕? Axure打開本地文件的技巧
Axure怎么導入本地的按鈕？Axure設(shè)計網(wǎng)頁圓形的時候，想要導入本地的按鈕，該怎么導入呢？下面我們就來看看Axure打開本地文件的技巧，需要的朋友可以參考下2018-01-10
Axure設(shè)計的登陸頁面怎么生成網(wǎng)頁原型?
Axure設(shè)計的登陸頁面怎么生成網(wǎng)頁原型？Axure中設(shè)計的登陸網(wǎng)頁想要直接生成網(wǎng)頁原型，該怎么生成呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-10
Axure文件怎么生成html分享鏈接？Axure中設(shè)計的模型想要分享給朋友觀看，該怎么生成html鏈接呢？下面我們就來看看2017-12-21
Axure RP怎么制作選項卡控件？網(wǎng)頁需要選項卡控件，但是Axure RP中沒有選項卡控件，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2017-12-21
