工欲善其事，必先利其器。作者分享了自己做放大鏡原型的過程，希望給大家帶來一些參考。
我是剛應聘產品助理的實習生，本身是學開發的，由於興趣愛好，選擇從事產品行業，工欲善其事，必先利其器，對於工具的熟練使用是非常有必要的，所以我會將自己學做的一些原型和經驗跟大家分享（我剛開始學-.-,-.-），歡迎大家指錯和給出意見，當然打賞也闊以哈哈，廢話不多說，開始我的第一篇文章！（看完教程後自己總結，不喜勿噴）
1.部件材料準備工作：
a.先放置2個矩形，大小成比最好，例如一個200*200（放置小圖片），另一個400*400（顯示小圖放大後的部位），分別設置為無邊框，並且單色填充為透明，方便顯示。ps:矩形比例很多都是這麼大，習慣使然。
b.將事先準備好的一張小圖片（命名小圖）放入小的矩形，再在小圖片之上添加一個更小的矩形（命名為放大鏡，並設置為隱藏，作用你懂的），尺寸定為50*50，同樣透明邊框顏色自定（我定為紅色）。
c.在大的矩形上添加一個動態面板，並在面板的狀態1下添加一個放大圖片（命名為放大圖），設置大小最好與小圖片成比例，我設置為1000*1000。
ps：以上不附圖片，各位肯定看得懂。
2.交互工作：
a.簡單的顯示隱藏。點擊小圖，在右邊交互中添加滑鼠移入時（顯示放大鏡），滑鼠移出時（隱藏放大鏡），如圖1所示。
圖1
b.比較難理解的就是這裡的交互了，頁面的交互。選擇「頁面滑鼠移動時」，點擊選擇移動「放大鏡」，設置x,y的距離，其實就是要怎樣更好的顯示放大框，接近用戶體驗，選擇「絕對距離」，點擊fx，點擊函數或者變量，插入函數Cursor.x 和Cursor.y，並設置為[[Cursor.x-20]] 和[[Cursor.y-20]]，記得2層括號。如圖2所示。
圖2
c.最難的來了，怎樣實現放大的效果呢？同樣選擇頁面滑鼠移動時的用例，選擇移動，並勾選動態面板下的放大圖，不用勾選動態面板，仍然是絕對定位，但這裡需要用到一個局部變量，命名默認即可，局部變量就在點擊fx後的下方，新增並選擇部件，對象為小圖，（如圖3所示）。並設置放大圖的顯示效果，即對小圖的放大效果。
ps：LVAR1即一個局部變量，而.left是大圖的x坐標，Cursor.x和Cursor.y則如前面提到過的是放大鏡（最小的矩形）停留的x,y坐標（相信學過前端的都懂）。而公式的意思的就是：（大圖的坐標-小圖的坐標）*倍數放大倍數==就是當前放大圖顯示到的部分啦，也許有人會問，那個+20是什麼意思？這個是因為放大鏡在前面設置的時候是Cursor.x-20,所以在這裡得補上20。
再ps：這個公式純照搬，我也看得不是很懂，自己實現的效果雖然說中心顯示沒錯，但周邊還是有些問題，可能是我還沒學到局部變量等知識吧，希望懂的人可以推薦一些相關的文章或視頻給我！（希望有人會看到）
最後生成原型，可以F5快速預覽效果！
本文由 @我說新手 原創發布於人人都是產品經理。未經許可，禁止轉載。