国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

Axure本身就提供了模板的功能，也就是說(shuō)只要實(shí)現(xiàn)一次但可以一勞永逸，本文就一起來(lái)看看這個(gè)遮罩層實(shí)現(xiàn)過(guò)程和效果。

今天在做產(chǎn)品原型設(shè)計(jì)時(shí)，遇到了個(gè)關(guān)于動(dòng)態(tài)顯現(xiàn)遮罩層的難點(diǎn)。“無(wú)奈”為追求高保真的效果，還是花了點(diǎn)心思做個(gè)原型實(shí)現(xiàn)。待做好回過(guò)頭來(lái)看看的話，其實(shí)這個(gè)效果的難度也不大，只是看個(gè)人意愿是否想做而已。

Axure本身就提供了模板的功能，也就是說(shuō)只要實(shí)現(xiàn)一次但可以一勞永逸。下面就一起來(lái)看看這個(gè)遮罩層實(shí)現(xiàn)過(guò)程和效果吧。

做前端開(kāi)發(fā)的同學(xué)都知道，在HTML實(shí)現(xiàn)一個(gè)遮罩層，只需要添加個(gè)浮動(dòng)的DIV即可輕松實(shí)現(xiàn)。那么在Axure中如何去實(shí)現(xiàn)它呢？

如上圖所示，可以將這個(gè)遮罩層的實(shí)現(xiàn)分為如下2部分：

• ?主體內(nèi)容，即遮罩層要蓋住的部分
• ?遮罩層組件，即遮罩層+其它裝飾部分（在Demo中只是增加了個(gè)Loading的動(dòng)畫(huà)圖片來(lái)區(qū)分）

所以遮罩層的實(shí)現(xiàn)思路就清晰啦步驟如下：

1. 準(zhǔn)備一個(gè)與你所想要遮蓋內(nèi)容大小相同的矩形框，注意要減去邊框的大小，示例：主體內(nèi)容大小為`600×400`，邊框?qū)挾葹?*1px**，那么遮罩層的大小為`598*398`且是無(wú)邊框的。
2. 設(shè)置遮罩層的填充色，還有相對(duì)的透明度。
3. 加強(qiáng)遮罩層顯示的動(dòng)畫(huà)效果（Axure上所支持的效果并不多，如不能夠滿足，可以采用文字描述闡明效果要求）。

接著用3個(gè)按鈕來(lái)做不同效果的展示：

打開(kāi)遮罩層：

關(guān)閉遮罩層：

自動(dòng)演示：

那么現(xiàn)在來(lái)看看最終的實(shí)現(xiàn)效果如下，請(qǐng)看下面的大屏幕：（點(diǎn)擊在線預(yù)覽）

如果想要做全屏的遮罩層就更加的簡(jiǎn)單啦，只在要顯示組件上增加個(gè)燈箱的效果即可。

PS：示例源文件下載：遮罩層效果.rp

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

題圖來(lái)自Unsplash，基于CC0協(xié)議