iOS使用半透明模糊效果方法整理

转自：http://blog.csdn.net/songchunmin_/article/details/51712669

0. Core Image

作为设计和体验方面的领导者，苹果自己对图片效果和图片处理的支持一定是非常好的，在iOS平台上，5.0之后就出现了Core Image的API。Core Image的API被放在CoreImage.framework库中。

在iOS和OS X平台上，Core Image都提供了大量的滤镜（Filter），这也是Core Image库中比较核心的东西之一。按照官方文档记载，在OS X上有120多种Filter，而在iOS上也有90多。

下面是一段Core Image做模糊的示例代码：

这里可以看到，Core Image为了做得比较灵活，Filter都是按字符串的名字去创建的，比如高斯模糊滤镜就是“CIGaussianBlur”，这里有一个官方列表可以参看。

除了这里提到的多种Filter之外，Core Image还提供了CIDetector等类，可以支持人脸识别等，在OS X上Core Image也做了更多支持。

1. GPUImage

除了苹果官方提供的之外，第三方也有这方面图片处理的工具。一个叫Brad Larson的老兄就搞了一套叫做GPUImage的开源库。同样的，里面提供了很多Filter。

同样是做高斯模糊，用GPUImage可以这样：

至少看起来，代码上比使用Core Image的情况简单得多。

2. vImage

其实，说完上面的Core Image和GPUImage，很多情况下就已经足够用了。下面我们再来看一个，那就是vImage。vImage也是苹果推出的库，在Accelerate.framework中。

Accelerate这个framework主要是用来做数字信号处理、图像处理相关的向量、矩阵运算的库。我们可以认为我们的图像都是由向量或者矩阵数据构成的，Accelerate里既然提供了高效的数学运算API，自然就能方便我们对图像做各种各样的处理。

基于vImage我们可以根据图像的处理原理直接做模糊效果，或者使用现有的工具。UIImage+ImageEffects是个很好的图像处理库，看名字也知道是对UIImage做的分类扩展。这个工具被广泛地使用着。

3. UIVisualEffectView(iOS8系统之后使用，有即时效果)

在iOS 8后，苹果开放了不少创建特效的接口，其中就包括创建毛玻璃(blur)的接口。

通常要想创建一个特殊效果(如blur效果)，可以创建一个UIVisualEffectView视图对象，这个对象提供了一种简单的方式来实现复杂的视觉效果。这个可以把这个对象看作是效果的一个容器，实际的效果会影响到该视图对象底下的内容，或者是添加到该视图对象的contentView中的内容。

我们举个例子来看看如果使用UIVisualEffectView：

[js] view
plain copy

let bgView: UIImageView = UIImageView(image: UIImage(named: "visual"))  

bgView.frame = self.view.bounds  

self.view.addSubview(bgView)  

let blurEffect: UIBlurEffect = UIBlurEffect(style: .Light)  

let blurView: UIVisualEffectView = UIVisualEffectView(effect: blurEffect)  

blurView.frame = CGRectMake(50.0, 50.0, self.view.frame.width - 100.0, 200.0)  

self.view.addSubview(blurView)  

这段代码是在当前视图控制器上添加了一个UIImageView作为背景图。然后在视图的一小部分中使用了blur效果。

我们可以看到UIVisualEffectView还是非常简单的。需要注意是的，不应该直接添加子视图到UIVisualEffectView视图中，而是应该添加到UIVisualEffectView对象的contentView中。

另外，尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值，因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作。这不但消耗CPU/GPU，也可能会导致许多效果显示不正确或者根本不显示。

我们在上面看到，初始化一个UIVisualEffectView对象的方法是UIVisualEffectView(effect: blurEffect)，其定义如下：

[js] view
plain copy

init(effect effect: UIVisualEffect)  

这个方法的参数是一个UIVisualEffect对象。我们查看官方文档，可以看到在UIKit中，定义了几个专门用来创建视觉特效的，它们分别是UIVisualEffect、UIBlurEffect和UIVibrancyEffect。它们的继承层次如下所示：

[js] view
plain copy

NSObject  

| -- UIVisualEffect  

    | -- UIBlurEffect  

    | -- UIVibrancyEffect  

UIVisualEffect是一个继承自NSObject的创建视觉效果的基类，然而这个类除了继承自NSObject的属性和方法外，没有提供任何新的属性和方法。其主要目的是用于初始化UIVisualEffectView，在这个初始化方法中可以传入UIBlurEffect或者UIVibrancyEffect对象。

一个UIBlurEffect对象用于将blur(毛玻璃)效果应用于UIVisualEffectView视图下面的内容。如上面的示例所示。不过，这个对象的效果并不影响UIVisualEffectView对象的contentView中的内容。

UIBlurEffect主要定义了三种效果，这些效果由枚举UIBlurEffectStyle来确定，该枚举的定义如下：

[js] view
plain copy

enum UIBlurEffectStyle : Int {  

    case ExtraLight  

    case Light  

    case Dark  

}  

其主要是根据色调(hue)来确定特效视图与底部视图的混合。

与UIBlurEffect不同的是，UIVibrancyEffect主要用于放大和调整UIVisualEffectView视图下面的内容的颜色，同时让UIVisualEffectView的contentView中的内容看起来更加生动。通常UIVibrancyEffect对象是与UIBlurEffect一起使用，主要用于处理在UIBlurEffect特效上的一些显示效果。接上面的代码，我们看看在blur的视图上添加一些新的特效，如下代码所示：

[js] view
plain copy

let vibrancyView: UIVisualEffectView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect))  

vibrancyView.setTranslatesAutoresizingMaskIntoConstraints(false)  

blurView.contentView.addSubview(vibrancyView)  

var label: UILabel = UILabel()  

label.setTranslatesAutoresizingMaskIntoConstraints(false)  

label.text = "Vibrancy Effect"  

label.font = UIFont(name: "HelveticaNeue-Bold", size: 30)  

label.textAlignment = .Center  

label.textColor = UIColor.whiteColor()  

vibrancyView.contentView.addSubview(label)  

vibrancy特效是取决于颜色值的。所有添加到contentView的子视图都必须实现tintColorDidChange方法并更新自己。需要注意的是，我们使用UIVibrancyEffect(forBlurEffect:)方法创建UIVibrancyEffect时，参数blurEffect必须是我们想加效果的那个blurEffect，否则可能不是我们想要的效果。

另外，UIVibrancyEffect还提供了一个类方法notificationCenterVibrancyEffect，其声明如下：

[js] view
plain copy

class func notificationCenterVibrancyEffect() -> UIVibrancyEffect!  

这个方法创建一个用于通知中心的Today扩展的vibrancy特效。