V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
waJun
V2EX  ›  分享发现

关于 UIVisualEffects 的介绍

  •  
  •   waJun · 2014-08-20 11:05:54 +08:00 · 2717 次点击
    这是一个创建于 3753 天前的主题,其中的信息可能已经有所发展或是发生改变。
    昨天设计同学问了个问题,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
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3227 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:14 · PVG 21:14 · LAX 05:14 · JFK 08:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.