关于 UIVisualEffects 的介绍

2014-08-20 11:05:54 +08:00
 waJun
昨天设计同学问了个问题,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
2734 次点击
所在节点    分享发现
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/128890

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX