昨天设计同学问了个问题,iOS8下设计到底做了什么新的元素,猛然想了一下,没有想出什么合适的介绍方法,从网上找找看,却都是些“独家首发”,“技术实现幻灯片”之类的水货,全不对题,只好照着代码实例,对照实现效果依样把每种样子胡乱给设计介绍了一通。
过后想想,应该怎么通俗移动的介绍iOS8的毛玻璃效果呢?既然是毛玻璃,还是从毛玻璃入手吧:)
效果图地址在最下。
Blur
iOS8带来了应用可实现的毛玻璃效果,模糊效果有三种类型可以选择:
Extra Light Blur(极亮)
Light Blur (亮)
Dark Blur (暗)
想象三种效果实现置于同一张图片之上,Light Blur看起来的效果最接近于我们通过毛玻璃看和玻璃距离很近的物体,可以看到不同颜色的边界的,Extra Light Blur呢,更接近与通过毛玻璃看和玻璃距离远的物体,也就是更多看到的是毛玻璃的那种白色,置于图片呢,只能看到它的明暗边界了。
Dark Blur其实和Extra效果相似,但是毛玻璃颜色是暗色的。
UIVibrancyEffect
这个效果可以这么想象小时候玩的一个,在毛玻璃上蘸水,可以是一部分地方变得更加透明。
这里UIVibrancyEffect作用就是为了实现这种相近的效果,注意,这也就表示UIVibrancyEffect是专门面向Blur的渲染效果。
对应三种不同的Blur,效果不禁相同。 Extra以及Light 本身实现的效果和那种毛玻璃蘸水是差不多的,Dark Blur本身不同,它的渲染效果是白色的。
注意:Light系->透明 Dark->白色
举几个简单例子:
前置步骤
1.首先我们创建好一个Blur View,这就有了基本的模糊效果。
2.紧接着我们从Blur View上创建出对应的Vibrancy View。这里注意,你设置不了Vibrancy的Frame,因为他是和对应的Blur紧密结合在一起的,作用区域就是Blur的Frame区域。
下面就是在Vibrancy上实现我们的效果啦,它使用了Mask(遮罩)得概念来帮助我们实现对应的效果。
1.加入Text,颜色深的文字部分会对应的变透明/白。
2.加入图片,色深部分对应变透明/白。
拓展:基本的实现已经有了,那么设计同学是否满意呢?
对应的三种Blur效果还是透明度还是不够?
没关系,可以在Vibrancy 上给全区域计入遮罩,这样子会全部透明起来:)(可以看看效果图的Status Bar部分的实现效果)
那么几个Mask叠压效果有如何呢,看看效果图吧,你一眼就可以看出来。
对应的效果图:
https://github.com/ide/UIVisualEffects/tree/master/Screenshots