工欲善其事，必先利其器。作者分享了自己做放大鏡原型的過程，希望給大家?guī)硪恍﹨⒖肌?/p>

我是剛應(yīng)聘產(chǎn)品助理的實習(xí)生，本身是學(xué)開發(fā)的，由于興趣愛好，選擇從事產(chǎn)品行業(yè)，工欲善其事，必先利其器，對于工具的熟練使用是非常有必要的，所以我會將自己學(xué)做的一些原型和經(jīng)驗跟大家分享（我剛開始學(xué)-.-,-.-），歡迎大家指錯和給出意見，當(dāng)然打賞也闊以哈哈，廢話不多說，開始我的第一篇文章！（看完教程后自己總結(jié)，不喜勿噴）

1.部件材料準(zhǔn)備工作：

a.先放置2個矩形，大小成比最好，例如一個200*200（放置小圖片），另一個400*400（顯示小圖放大后的部位），分別設(shè)置為無邊框，并且單色填充為透明，方便顯示。ps:矩形比例很多都是這么大，習(xí)慣使然。

b.將事先準(zhǔn)備好的一張小圖片（命名小圖）放入小的矩形，再在小圖片之上添加一個更小的矩形（命名為放大鏡，并設(shè)置為隱藏，作用你懂的），尺寸定為50*50，同樣透明邊框顏色自定（我定為紅色）。

c.在大的矩形上添加一個動態(tài)面板，并在面板的狀態(tài)1下添加一個放大圖片（命名為放大圖），設(shè)置大小最好與小圖片成比例，我設(shè)置為1000*1000。

ps：以上不附圖片，各位肯定看得懂。

2.交互工作：

a.簡單的顯示隱藏。點擊小圖，在右邊交互中添加鼠標(biāo)移入時（顯示放大鏡），鼠標(biāo)移出時（隱藏放大鏡），如圖1所示。

圖1

b.比較難理解的就是這里的交互了，頁面的交互。選擇“頁面鼠標(biāo)移動時”，點擊選擇移動“放大鏡”，設(shè)置x,y的距離，其實就是要怎樣更好的顯示放大框，接近用戶體驗，選擇“絕對距離”，點擊fx，點擊函數(shù)或者變量，插入函數(shù)Cursor.x 和Cursor.y，并設(shè)置為[[Cursor.x-20]] 和[[Cursor.y-20]]，記得2層括號。如圖2所示。

圖2

c.最難的來了，怎樣實現(xiàn)放大的效果呢？同樣選擇頁面鼠標(biāo)移動時的用例，選擇移動，并勾選動態(tài)面板下的放大圖，不用勾選動態(tài)面板，仍然是絕對定位，但這里需要用到一個局部變量，命名默認(rèn)即可，局部變量就在點擊fx后的下方，新增并選擇部件，對象為小圖，（如圖3所示）。并設(shè)置放大圖的顯示效果，即對小圖的放大效果。

ps：LVAR1即一個局部變量，而.left是大圖的x坐標(biāo)，Cursor.x和Cursor.y則如前面提到過的是放大鏡（最小的矩形）停留的x,y坐標(biāo)（相信學(xué)過前端的都懂）。而公式的意思的就是：（大圖的坐標(biāo)-小圖的坐標(biāo)）*倍數(shù)放大倍數(shù)==就是當(dāng)前放大圖顯示到的部分啦，也許有人會問，那個+20是什么意思？這個是因為放大鏡在前面設(shè)置的時候是Cursor.x-20,所以在這里得補(bǔ)上20。

再ps：這個公式純照搬，我也看得不是很懂，自己實現(xiàn)的效果雖然說中心顯示沒錯，但周邊還是有些問題，可能是我還沒學(xué)到局部變量等知識吧，希望懂的人可以推薦一些相關(guān)的文章或視頻給我?。ㄏＭ腥藭吹剑?/p>

最后生成原型，可以F5快速預(yù)覽效果！

本文由 @我說新手 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。