iOS动画图层 — iOS模糊效果

     在iOS平台下,如果需要对UIImageView中的图片进行简单的模糊处理,可以使用自带的API进行处理。

     CoreImage是苹果用来简化图片处理的框架。

     首先我们将一张图片显示到UIImageView中,效果如下:

     iOS动画图层 — iOS模糊效果_第1张图片

     下面的代码片段可以实现图片的模糊效果

	//CIImage
	CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"bg"]];
	//CIFilter 设置一个模糊滤镜
	CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
	//将图片放入滤镜中
	[blurFilter setValue:ciImage forKey:kCIInputImageKey];
	//输出CIFilter的键值对描述
	NSLog(@"%@",[blurFilter attributes]);
	//设置模糊程度
	[blurFilter setValue:@(2) forKey:@"inputRadius"];
	//将处理好的图片输出
	CIImage *outimage = [blurFilter valueForKey:kCIOutputImageKey];
	//CIContext 设置nil的时候默认使用CPU渲染
	CIContext *context = [CIContext contextWithOptions:nil];
	//获取CIImage句柄
	CGImageRef outputCGImage = [context createCGImage:outimage fromRect:[outimage extent]];
	//最终获取图片
	UIImage *blurImage = [UIImage imageWithCGImage:outputCGImage];
	//释放CGImage句柄
	CGImageRelease(outputCGImage);

 
   
  

     现在将blurImage显示的效果就变成下图:

     iOS动画图层 — iOS模糊效果_第2张图片

     如果需要对图片上添加的文本进行模糊渲染,可以使用UIVisualEffectView进行实时渲染,但是UIVisualEffectView只能够在iOS8及以后的版本使用,因此,如果你的App需要兼容以前版本,还是需要考虑一下。

     另外需要注意的是,UIVisualEffectView需要显示在UIScrollView上。我们需要达到的效果是如下这样:

     iOS动画图层 — iOS模糊效果_第3张图片

     下面贴出代码片段:

      

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIScrollView *scrollView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //添加背景图片
    self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    UIImageView * imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bg"]];
    self.scrollView.contentSize = imageView.image.size;
    [self.scrollView addSubview:imageView];
    [self.view addSubview:self.scrollView];
	
    //添加模糊效果(这块部分是我们截图中白色的模糊背景)
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
    //设置effectView的frame值
    effectView.frame = CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, 50);
    [self.view addSubview:effectView];
	
    //添加显示文本
    //初始化label并且设置frame值
    UILabel *label = [[UILabel alloc] initWithFrame:effectView.bounds];
    //label的text值
    label.text = @"黎明中的城市";
    //label的字体大小
    label.font = [UIFont systemFontOfSize:30];
    //label的对齐方式
    label.textAlignment = NSTextAlignmentCenter;
    [effectView.contentView addSubview:label];
	
    //添加模糊子view的UIVisualEffectView
    /*创建出子模糊view,需要注意的是,这里的subEffectView相当于是对label的模糊处理,label的模糊
      效果需要和effectView的模糊效果保持一致,因此我们使用了[UIVibrancyEffect effectForBlurEf      fect(UIBlurEffect *)effectView.effect]
     */
    UIVisualEffectView *subEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)effectView.effect]];
	
    subEffectView.frame = effectView.bounds;
    //将子模糊view添加到effectView的contentView中才能生效
    [effectView.contentView addSubview:subEffectView];
    //添加要显示的view来达到特殊效果
    [subEffectView.contentView addSubview:label];
	
}
@end


 
   

你可能感兴趣的:(iOS开发)