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

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

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

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

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

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];

效果如下:


iOS中实现模糊效果的几种方法_第1张图片
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];

效果如下:


iOS中实现模糊效果的几种方法_第2张图片
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,否则不会有效果。

效果如下:


iOS中实现模糊效果的几种方法_第3张图片
blur_vibrancy.png

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

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

总结

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

你可能感兴趣的:(iOS中实现模糊效果的几种方法)