中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

不知道大家在做原型過(guò)程中是否通常會(huì)遇到一些想要的交互效果，可是呢又做不出來(lái)，那就很難過(guò)。沒(méi)關(guān)系，我們慢慢的熟悉，今天分享一個(gè)把圖片局部放大的交互——“放大鏡”效果。

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

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

第二步：添加整體頁(yè)面載入時(shí)用例

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

第三步：為“放大鏡”添加鼠標(biāo)移動(dòng)時(shí)用例

用例中有兩個(gè)動(dòng)作：

1. ?絕對(duì)移動(dòng)“放大鏡”，x軸移動(dòng)到【鼠標(biāo)的x坐標(biāo)-“放大鏡”寬度的一半】，y軸移動(dòng)到【鼠標(biāo)的y軸-“放大鏡”高度的一半】，并且左側(cè)、右側(cè)、頂部和底部的邊界分別為“小圖”的左側(cè)、右側(cè)、頂部和底部。
2. 絕對(duì)移動(dòng)“大圖”，x軸移動(dòng)到【（“小圖”左側(cè)-“放大鏡”左側(cè)）*OnLoadVariable】，y軸移動(dòng)到【（“小圖”頂部-“放大鏡”頂部）*OnLoadVariable】。

設(shè)置完移動(dòng)“放大鏡”的動(dòng)作后繼續(xù)添加移動(dòng)“大圖”的動(dòng)作，移動(dòng)“大圖”不需要添加邊界設(shè)置。

第四步：為“小圖”添加鼠標(biāo)移動(dòng)時(shí)用例

該用例與“放大鏡”的鼠標(biāo)移動(dòng)時(shí)用例一樣，這樣直接復(fù)制粘貼過(guò)來(lái)就可以用了。

第五步：為“小圖”添加鼠標(biāo)移入時(shí)用例（注意是移入時(shí)用例）

該用例有兩個(gè)動(dòng)作 ：

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

這樣就設(shè)置好了，第三步是比較復(fù)雜的，有很多變量要設(shè)置，所以要細(xì)心一點(diǎn)才可以喔。

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

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

題圖作者提供