axure中制作地圖放大效果很方便，想要添加一個控制條控制圖片，不僅僅只是固定的倍率，這次要用“拉桿”滑動的方式，來線性發(fā)大“地圖”，下面我們就來看看詳細的教程，具體效果如下圖。

Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機+漢化包+安裝教程)

• 類型：輔助設計
• 大?。?/span>83.2MB
• 語言：簡體中文
• 時間：2019-04-26

查看詳情

首先，導入上一次設計完成的“地圖”控件，如不明白的地方，

當然，“文本標簽：X”，“文本標簽：Y”，“矩形：1X”，“矩形：2X”，“矩形：3X”可以做隱藏處理~

另新建兩個“文本標簽”；1.命名為“ratio”，設置為隱藏；2.命名為"describe"，設置內容為"放大比率：1X"；

新建一矩形，尺寸為600*9；

新建一“動態(tài)面板”，尺寸為20*30，命名為“handle”，背景顏色為#00FF00；

新建的控件，布局如下：

主要的交互在于“動態(tài)面板：handle”，“圖片（地圖）”的拖動，在上兩篇設計中，都有涉及，沒有什么變化，主要是控制“圖片（地圖）”的拖動邊界即可，這里不再贅述~

以下，就針對“動態(tài)面板：handle”的“拖動時”的交互，做具體說明~

Case1的交互動作：

動作1

拖動“動態(tài)面板：handle”；移動方式：水平拖動；動畫：無；

其中，“元件：矩形”為局部變量LVAR1；

所以界限，左側大于等于“[[LVAR1.left]]”，右側小于等于“[[LVAR1.right]]”；

動作2

設置“文本標簽：ratio”的值

其中，“動態(tài)面板：handle”為局部變量LVAR1，“元件：矩形”為局部變量LVAR2；所以，“文本標簽：ratio”的值為“[[(((LVAR1.x-LVAR2.x)/(LVAR2.width-lvar1.width)+0.25)*4).toFixed(2)]]”

動作3

設置“文本標簽：describe”的值

其中，“文本標簽：ratio”為局部變量LVAR1；所以，“文本標簽：describe”的值為“放大比率：[[LVAR1.text]]X”

動作4

設置“圖片：pic”尺寸大小；描點：中心；動畫：無；

其中，“文本標簽：ratio”為局部變量LVAR1；

所以寬的值為“[[600*LVAR1.text]]”，高的值為“[[375*LVAR1.text]]”

動作5

設置“文本標簽：X”的值

設置“文本標簽：Y”的值

其中，"動態(tài)面板：display”為局部變量LVAR1；

所以X的值為“[[LVAR1.x]]”，Y的值為“[[LVAR1.y]]”；

Case2到Case6的交互動作和“矩形：2X”的動作一致，只需復制過來即可~

具體可參考以下鏈接~

依舊，所有Case都是<if>判斷方式，不是<Else if>；

哈哈，晉級設計感覺超簡單，一個用拉桿方式線性放大，縮小的“地圖”模擬控件，就做好了~

以上就是Axure地圖放大效果并添加控制條的教程，希望大家喜歡，請繼續(xù)關注腳本之家。

相關推薦：

Axure中繼器怎么制作飯店菜譜?

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

Axure怎么通過變量方式獲取輸入框中的值?

最新評論