透明遮罩圖層VS高斯模糊濾鏡 效果分析

前端流行佈局中最多見的彈出圖層有popup, 對話框, tooltip等, 他們都使用了新的圖層,可是實現辦法各不相同, 有 的是經過半通明的黑白圖層實現的, 有的是經過濾鏡實現的, 咱們來研究一下二者的區別 和使用場景.

半透明遮罩層

透明圖層是實現很簡單, 是在每個像素上分配一個權重值, 0~1, 剩下的顏色計算自底層, 通過疊加計算獲得新的像素

 

alpha疊加原理

來自上次項目中的一個問題: 例如，若是我爲兩個單獨的標題設置值爲rgba（15,34,160,1）和rgba（15 34,160,0.5），則它們被稱爲具備相同的顏色，但具備不一樣的顏色不透明度值。我想知道的是這些顏色是否其實是相同的。個人意思是，就像素出來的光而言，它們確定是不一樣的，以便建立兩個不一樣的標題外觀。但這是否意味着alpha值實際上用於以某種特定方式更改顏色？

其實由於你能夠「半看」半透明元素背後的元素的顏色，它將與該顏色混合（若是背景爲白色，它將顯得更亮，若是它是黑色，更暗，若是它是另外一種顏色那裏也將是顏色的混合物。

所以，從技術上講，它是具備不一樣透明度的相同顏色，但感知結果將是不一樣的顏色（除非透明的背後的元素具備相同的顏色）

OK, alpha就講這麼多, 畢竟這不是主題, 下面來介紹下濾鏡和透明色的關係與區別

 

高斯模糊

 

盜一張阮一峯的圖:

在圖像處理中，高斯模糊（也稱爲高斯平滑）是經過高斯函數模糊圖像的結果（以數學家和科學家Carl Friedrich Gauss命名）。 它是圖形軟件中普遍使用的效果，一般用於下降圖像噪聲並減小細節。

高斯模糊最核心的觀點就是一種'潤化'算法, 和'銳化'相反, 潤化會將相鄰的像素顏色取平均值, 甚至能夠造成動畫, 即ColorTransition, 而後這個'相鄰'''的半徑就決定了模糊程度

這裏只是想說, 高斯模糊只是模糊算法中最多見的, 也是最易理解的, 關於高斯模糊能夠參考ruanyf的文章:

http://www.ruanyifeng.com/blog/2012/11/gaussian_blur.html

 

正態模糊?

 

做爲一個視覺設計師，咱們老是遇到而且知道模糊和高斯模糊 但任何正態模糊和高斯模糊之間有什麼區別？模糊算法是不一樣的，仍是取決於算法，其實中心差別是高斯模糊在像素周圍採用加權平均，而「正常」模糊僅將單個像素半徑中的全部像素平均在一塊兒（我相信）。我認爲後一種「正常」模糊稱爲盒子模糊。

因爲高斯模糊的加權方式，它不適合僞焦點模糊。3D藝術家的一個常見錯誤是使用高斯模糊來僞造景深效果，而「正常」非加權模糊更適合。在另外一方面，高斯模糊是很是適合毛玻璃效果。

總的來講, 正態分佈就是高斯模糊計算像素影響力的一個權重分配算法: 越靠近的影響力越大, ○則小, 科學證實, 符合正態分佈的渲染圖是最美的.

 

 

設計模式的邏輯區別

 

遮罩層與濾鏡的根本區別是, 遮罩層中每個像素之間是徹底獨立的! 這點最重要, 也就是說遮罩層和底層也是徹底隔離的, 只是在顯示的時候系統幫咱們計算了, 邏輯上仍然是徹底獨立的 , 可是濾鏡就徹底不同了, 濾鏡也比遮罩層複雜許多, 由於每一個像素與之周圍甚至很遠的像素之間都是互相影響的, 就好比剛剛的高斯模糊算法就是去一個像素矩陣的平均值, 這在ps的濾鏡庫中已經算很簡單的算法了

在邏輯上, 操做系統或者虛擬機不會像alpha同樣主動幫咱們計算混合色(由於太複雜且不肯定), 這個計算須要咱們開發者手動指定, 好比QML中的FastBlur要指定一個source對象, 計算生成一個新的圖層對象, 再把原對象隱藏掉以後才真正產生咱們須要的模糊效果. 因此咱們在開發UI的時候須要搞清楚這些邏輯上 的區別, 以及性能上的區別 ,才能避免沒必要要的坑!

 

應用場景

 

不管是遮罩層仍是模糊濾鏡, 都適合做爲彈出框, 標題, 對話框的底層, 可是很顯然,二者的效果是有很大的差異的 , 具體在哪一個地方用哪一種圖層是一個須要慎重考慮的問題,下面是個人我的看法:

 

 根據經驗, 一般對於徹底不透明的彈窗好比alert, 周圍剩下的地方都放上一個半透明的黑色圖層(#88000000)

若是是相似水印的版權標記, 就得用白色的alpha了(#88ffffff),但只須要一箇中間的矩形, 內部放上一些黑色字體:

 

若是是爲了突出上層, 又沒有調整亮度的需求, 好比嵌入式領域的一些屏幕的卡片模塊就是和模糊濾鏡

固然沒有絕對的使用規則, 最主要的仍是根據我的口味和真實狀況來對比感受那個好看就用哪一個

(完)