Swift - 实现毛玻璃效果（Blur、模糊、虚化背景元素）

苹果从  iOS 7  起，大量使用了毛玻璃效果。比如上拉的控制中心就使用了毛玻璃效果。但当时还未向开发者公开提供毛玻璃效果的API，因此开发者只能去自己实现毛玻璃效果或者找第三方类库解决。
后来到了  iOS 8 ，SDK中直接提供了  UIBlurEffect  类与  UIVisualEffectView  类，配合使用这两个类可以轻松实现毛玻璃效果。

1，准备工作
假设我们在页面视图上放置了一个  imageView 。下面演示如何在其之上添加毛玻璃效果。

2，使用UIBlurEffect、UIVisualEffectView实现毛玻璃效果
（1）创建一个  UIBlurEffect  类的实例，并指定某一种毛玻璃效果样式。
（2）创建  UIVisualEffectView  类的实例，这个可以称它为模糊视图。将前面创建的  UIBlurEffect  类的实例应用到这个模糊视图上。
（3）将  UIVisualEffectView  类的实例（模糊视图）置于待毛玻璃化的视图之上即可。在其下方的所有视图都会有模糊效果。

import  UIKit

class  ViewController :  UIViewController  {

    override  func  viewDidLoad() {
        super .viewDidLoad()

        //首先创建一个模糊效果
        let  blurEffect =  UIBlurEffect (style: . Light )
        //接着创建一个承载模糊效果的视图
        let  blurView =  UIVisualEffectView (effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size =  CGSize (width: view.frame.width, height: view.frame.height)
        //添加模糊视图到页面view上（模糊视图下方都会有模糊效果）
        self .view.addSubview(blurView)
    }

    override  func  didReceiveMemoryWarning() {
        super .didReceiveMemoryWarning()
    }
}

3，三种模糊效果
除了上面使用的  Light  样式。 UIBlurEffect  一共定义了三种效果，这些效果由枚举  UIBlurEffectStyle  来确定，

分别是： ExtraLight、 Light、 Dark。
我们可以根据色调（ hue）来确定特效视图与底部视图的混合样式，使其更符合我们的页面风格。
              

4，添加Vibrancy
通过模糊背景，我们可以让前景文字或其它视图元素显得更加突出。

而苹果在其之上又引入了  UIVibrancyEffect。 UIVibrancyEffect 主要用于放大和调整  UIVisualEffectView 视图下面的内容的颜色，同时让  UIVisualEffectView 的  contentView 中的内容看起来更加生动。
通常  UIVibrancyEffect 对象是与  UIBlurEffect 一起使用，下面对页面上的文本标签做  Vibrancy 效果，可以看到文本标签在屏幕上显得更为舒适。

import  UIKit

class  ViewController :  UIViewController  {

    override  func  viewDidLoad() {
        super .viewDidLoad()

        //首先创建一个模糊效果
        let  blurEffect =  UIBlurEffect (style: . Light )
        //接着创建一个承载模糊效果的视图
        let  blurView =  UIVisualEffectView (effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size =  CGSize (width: view.frame.width, height: view.frame.height)

        //创建并添加vibrancy视图
        let  vibrancyView =  UIVisualEffectView (effect:
            UIVibrancyEffect (forBlurEffect: blurEffect))
        vibrancyView.frame.size =  CGSize (width: view.frame.width, height: view.frame.height)
        blurView.contentView.addSubview(vibrancyView)

        //将文本标签添加到vibrancy视图中
        let  label= UILabel (frame: CGRectMake (10,20, 300, 100))
        label.text =  "hangge.com"
        label.font =  UIFont (name:  "HelveticaNeue-Bold" , size: 40)
        label.textAlignment = . Center
        label.textColor =  UIColor .whiteColor()
        vibrancyView.contentView.addSubview(label)

        self .view.addSubview(blurView)
    }

    override  func  didReceiveMemoryWarning() {
        super .didReceiveMemoryWarning()
    }
}

将  blurEffect 的样式设为  .Dark 的效果：

import  UIKit

class  ViewController :  UIViewController  {

    override  func  viewDidLoad() {
        super .viewDidLoad()

        //首先创建一个模糊效果
        let  blurEffect =  UIBlurEffect (style: . Dark )
        //接着创建一个承载模糊效果的视图
        let  blurView =  UIVisualEffectView (effect: blurEffect)
        //设置模糊视图的大小（全屏）
        blurView.frame.size =  CGSize (width: view.frame.width, height: view.frame.height)

        //创建并添加vibrancy视图
        let  vibrancyView =  UIVisualEffectView (effect:
            UIVibrancyEffect (forBlurEffect: blurEffect))
        vibrancyView.frame.size =  CGSize (width: view.frame.width, height: view.frame.height)
        blurView.contentView.addSubview(vibrancyView)

        //将文本标签添加到vibrancy视图中
        let  label= UILabel (frame: CGRectMake (10,20, 300, 100))
        label.text =  "hangge.com"
        label.font =  UIFont (name:  "HelveticaNeue-Bold" , size: 40)
        label.textAlignment = . Center
        label.textColor =  UIColor .whiteColor()
        vibrancyView.contentView.addSubview(label)

        self .view.addSubview(blurView)
    }

    override  func  didReceiveMemoryWarning() {
        super .didReceiveMemoryWarning()
    }
}

5，源码下载： hangge_1135.zip
原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1135.html