透明遮罩图层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),但只须要一个中间的矩形, 内部放上一些黑色字体:

 

若是是为了突出上层, 又没有调整亮度的需求, 好比嵌入式领域的一些屏幕的卡片模块就是和模糊滤镜

固然没有绝对的使用规则, 最主要的仍是根据我的口味和真实状况来对比感受那个好看就用哪一个

(完)