iOS中实现模糊效果的几种方法

自iOS7开始，苹果的系统中大量使用了模糊效果，如下拉出通知中心，或是点击Assistive Touch出现弹窗时，背景都会被模糊，从而使得靠前的内容更容易获得用户的关注。

对于开发者来说，要想实现模糊效果，常用的方法有：

• 利用苹果开源的UIImage+ImageEffects这个分类
• 使用UIToolbar或是UINavigationBar
• 使用iOS8中提供的UIVisualEffectView

下面分别演示这3种方法，并分析其使用场合和优缺点。示例中使用了一张图片，原始效果如下所示：

[email protected]

UIImage+ImageEffects

苹果开源的代码，可以在这里下载: UIImage+ImageEffects.h, UIImage+ImageEffects.m
这种办法实际上是对加载出的UIImage进行处理，得到模糊效果后，可以使用UIImage对象创建视图。示例代码如下：

UIImage *image = [UIImage imageNamed: @"test"];
image = [image applyLightEffect];
UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
backgroundView.contentMode = UIViewContentModeScaleAspectFill;
backgroundView.image = image;
[self.view addSubview: backgroundView];

效果如下：

applyLightWithCategory.png

使用场合：需要对静态的图片进行模糊时
优点：

• iOS7就可以使用
• 官方代码，质量上有保证
• API简单易用
• 可以控制参数，调节模糊效果

使用UIToolbar或是UINavigationBar覆盖在要模糊内容的上方

这两个控件覆盖在其它视图上方时，能够看到下面的内容，并且是模糊效果。

    UIImage *image = [UIImage imageNamed: @"test"];
    UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
    backgroundView.contentMode = UIViewContentModeScaleAspectFill;
    backgroundView.image = image;
    [self.view addSubview: backgroundView];
    
    UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame: self.view.bounds];
    [self.view addSubview: toolbar];

效果如下：

toolbar.png

使用场合：如果被模糊的内容不是静态内容，会在屏幕上动，那么只能使用这种办法。
优点：可以支持较低的系统版本
缺点：不可调节模糊效果，并且与第一种方法的效果并不一致

使用UIVisualEffectView

在iOS8中,苹果引入了UIVisualEffectView以及UIVisualEffect，利用这些新的特性，非常容易添加两种效果: UIBlurEffect（高斯模糊）以及UIVibrancyEffect(这种效果能把当前视图和背景视图混合起来)。

    UIImage *image = [UIImage imageNamed: @"test"];
    UIImageView *backgroundView = [[UIImageView alloc] initWithFrame: self.view.bounds];
    backgroundView.contentMode = UIViewContentModeScaleAspectFill;
    backgroundView.image = image;
    [self.view addSubview: backgroundView];
    
    UIBlurEffect *blur = [UIBlurEffect effectWithStyle: UIBlurEffectStyleLight];
    UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect: blur];
    blurView.frame = self.view.bounds;
    [backgroundView addSubview: blurView];
    
    UIVisualEffectView *vibrancyView = [[UIVisualEffectView alloc] initWithEffect: [UIVibrancyEffect effectForBlurEffect: blur]];
    vibrancyView.frame = blurView.bounds;
    [blurView.contentView addSubview: vibrancyView];
    
    UIImageView *iconView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"level_2"]];
    iconView.center = CGPointMake(vibrancyView.bounds.size.width / 2, vibrancyView.bounds.size.height / 2);
    [vibrancyView.contentView addSubview: iconView];
    
    UIImageView *withoutVibrancy = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"level_2"]];
    withoutVibrancy.center = CGPointMake(vibrancyView.bounds.size.width / 2,  vibrancyView.bounds.size.height / 2 - 100);
    [backgroundView addSubview: withoutVibrancy];

使用时要注意以下几点：

• 实现模糊时，要将BlurEffectView添加为相应视图的子视图
• 实现Vibrancy时，要将VibrancyEffectView首先添加到blurView.contentView，再将需要vibrancy效果的视图，添加到vibrancyView.contentView，否则不会有效果。

效果如下：

blur_vibrancy.png

背景图中添加了两个UIImageView，上面的没有Vibrancy效果，下面的有。

优点：苹果原生支持
缺点：iOS8及以上的系统可使用；不支持调节参数。

总结

除此之外，还有使用CoreImage中的高斯滤镜，以及GPUImage的方法，笔者觉得较为麻烦，这里就不提及了。