Axure教程：「放大鏡」效果如何實現

不知道大家在做原型過程中是否通常會遇到一些想要的交互效果，可是呢又做不出來，那就很難過。沒關係，我們慢慢的熟悉，今天分享一個把圖片局部放大的交互——“放大鏡”效果。

第一步 ：擺放好相應的組件，還有一張自己喜歡的圖片

1. 選擇一張大小為300×200的圖片，命名為“小圖”，也可以自己設置尺寸，適中就好；
2. 一個150×200的矩形，設置為黃底黃邊，不透明度30%左右，初始狀態設置為隱藏（不要遺漏這一步），命名為“放大鏡”，放置在“小圖”的右下角；
3. 一個300×200的動態面板（注意：動態面板尺寸與“小圖”一致），初始狀態設置為隱藏 ，命名為“放大窗口”，放置在小圖的右邊，可以緊靠“小圖”，並且在state1面板狀態中放置一張600×400的圖片（注意：與“小圖”為同一張圖片，尺寸設置最好與“小圖”等比例），命名為“大圖”。現在所有組件擺放完畢，然後添加用例。

第二步：添加整體頁面載入時用例

在用例中設置全部變量OnLoadVariable為【大圖寬度/小圖寬度】，大小圖的寬度比例（注意：index頁面什麼組件都不選中的情況下設置用例）。

第三步：為“放大鏡”添加鼠標移動時用例

用例中有兩個動作：

1. 絕對移動“放大鏡”，x軸移動到【鼠標的x座標-“放大鏡”寬度的一半】，y軸移動到【鼠標的y軸-“放大鏡”高度的一半】，並且左側、右側、頂部和底部的邊界分別為“小圖”的左側、右側、頂部和底部。
2. 絕對移動“大圖”，x軸移動到【（“小圖”左側-“放大鏡”左側）*OnLoadVariable】，y軸移動到【（“小圖”頂部-“放大鏡”頂部）*OnLoadVariable】。

設置完移動“放大鏡”的動作後繼續添加移動“大圖”的動作，移動“大圖”不需要添加邊界設置。

第四步：為“小圖”添加鼠標移動時用例

該用例與“放大鏡”的鼠標移動時用例一樣，這樣直接複製粘貼過來就可以用了。

第五步：為“小圖”添加鼠標移入時用例（注意是移入時用例）

該用例有兩個動作 ：

1. 一個顯示“放大鏡”；
2. 另一個顯示“放大窗口”。

這樣就設置好了，第三步是比較複雜的，有很多變量要設置，所以要細心一點才可以喔。

預覽就可以看到效果啦，下面附上自己做的預覽效果，可以點擊看下：https://x0lr2x.axshare.com

題圖作者提供

閱讀更多 人人都是產品經理 的文章

關鍵字: 效果 放大鏡 科技