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

軟件名稱：Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機+漢化包+安裝教程)軟件大小：83.2MB更新時間：2019-04-26

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

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

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

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

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

新建的控件，布局如下：

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

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

Case1的交互動作：

動作1

拖動“動態面板：handle”；移動方式：水平拖動；動畫：無；

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

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

動作2

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

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

動作3

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

上一頁12 下一頁 閱讀全文