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

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

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

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

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

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

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

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

接著用3個按鈕來做不同效果的展示：

打開遮罩層：

關(guān)閉遮罩層：

自動演示：

那么現(xiàn)在來看看最終的實現(xiàn)效果如下，請看下面的大屏幕：（點擊在線預(yù)覽）

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

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

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

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