Cowboy Tech

iOS模糊效果的使用

CoreImage中的模糊滤镜

  1. CoreImage是苹果用来简化图片处理的框架
  2. CIImage, CIFilter与CIContext三者之间的联系
  3. CIGaussianBlur中可以设置的参数

代码

- (void)viewDidLoad {

[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 原始图片
UIImage *image = [UIImage imageNamed:@"girl.jpg"];

/*......coreImage部分........ */

//CIImage
CIImage *ciImage = [[CIImage alloc]initWithImage:image];

//CIFilter
CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];

//将图片输入到滤镜中
[blurFilter setValue:ciImage forKey:kCIInputImageKey];

//    //设置的模糊程度
//    [blurFilter setValue:@(100) forKey:@"inputRadius"];
//

//将处理好的图片输出
CIImage *outCiImage = [blurFilter valueForKey:kCIOutputImageKey];

NSLog(@"%@",[blurFilter attributes]);

//CIContext
CIContext *context = [CIContext contextWithOptions:nil];

//获取CGImage句柄
CGImageRef outCGImage = [context createCGImage:outCiImage
                                      fromRect:[outCiImage extent]];
//最终获取到图片
UIImage *blurImage = [UIImage imageWithCGImage:outCGImage];

//释放CGImage句柄
CGImageRelease(outCGImage);

/*.............. */

//初始化UIImageView
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 590/2.f, 988/2.f)];
imageView.image = blurImage;
imageView.center = self.view.center;
[self.view addSubview:imageView];

}

UIImage + ImageEffects的category模糊效果

  1. UIImage + ImageEffects是Accelerate框架中的内容
  2. UIImage + ImageEffects的模糊效果非常美观
  3. 修改过的UIImage + ImageEffects可以对图片进行局部模糊

代码

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.


//原始图片
UIImage *sourceImage = [UIImage imageNamed:@"normal.png"];

//对图片进行部分模糊
//UIImage *blurImage = [sourceImage blurImage];
UIImage *blurImage = [sourceImage blurImageAtFrame:CGRectMake(0, 100, sourceImage.size.width, sourceImage.size.height/2.f)];


//加载图片
UIImageView *imageView = [[UIImageView alloc]initWithImage:blurImage];
[self.view addSubview:imageView];
}

iOS8中UIVisualEffectView模糊效果的使用

  1. UIVisualEffectView的模糊效果是即使渲染的
  2. 要注意处理在UIVisualEffectView之上的文本显示
  3. 只能在iOS8以上才能够使用UIVisualEffectView

代码

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

//添加展示背景,用以显示动态模糊
self.scrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"girl.jpg"]];
self.scrollView.contentSize = imageView.image.size;
self.scrollView.bounces = NO;
[self.scrollView addSubview:imageView];
[self.view addSubview:self.scrollView];

/* 添加模糊效果*/

//1. 创建模糊view
UIVisualEffectView *effectView = [[UIVisualEffectView alloc]
                              initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];

//2.设定尺寸
effectView.frame = CGRectMake(0, 100, 320, 200);

//3.添加到view当中
[self.view addSubview:effectView];

//添加显示文本
UILabel *label = [[UILabel alloc]initWithFrame:effectView.bounds];
label.text = @"I love you";
label.font = [UIFont systemFontOfSize:50.f];
label.textAlignment = NSTextAlignmentCenter;
//[effectView.contentView addSubview:label];

//添加模糊子view的UIVisualEffectView

//1. 创建出子模糊view
UIVisualEffectView *subEffectView = [[UIVisualEffectView alloc]
                                     initWithEffect:[UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)effectView.effect]];

//2. 设定尺寸
subEffectView.frame = effectView.bounds;

//3. 将子模糊view添加到effectView的contentView才能生效
[effectView.contentView addSubview:subEffectView];

//4. 添加要显示的view来达到特殊的效果
[subEffectView.contentView addSubview:label];
}

设计下载图片后自动模糊的控件

  1. 用KVO监听下载完成后的事件
  2. 在子线程中进行渲染,主线程中进行图片的加载

代码

viewController.m

- (void)viewDidLoad {
[super viewDidLoad];

NSString *picUrlString = @"http://f.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4ce4ea4cd4d52a6059242da6d7.jpg";

BlurDownloadPicView *blurDownloadView = [[BlurDownloadPicView alloc]initWithFrame:CGRectMake(0, 0, 320, 400)];
blurDownloadView.center = self.view.center;
blurDownloadView.pictureUrlString = picUrlString;
//内容填充模式(图片怎样填入)
blurDownloadView.contentMode = UIViewContentModeScaleAspectFit;
[self.view addSubview:blurDownloadView];

[blurDownloadView startProgress];

}

BlurDownloadPicView.m

@interface BlurDownloadPicView ()
@property (nonatomic,strong) UIImageView *imageView;
@end
@implementation BlurDownloadPicView

- (instancetype)initWithFrame:(CGRect)frame {

self = [super initWithFrame:frame];
if (self) {
    //初始化控件
    self.imageView = [[UIImageView alloc]initWithFrame:self.bounds];
    self.imageView.alpha = 0.f;
    [self addSubview:self.imageView];
}
return self;
}

- (void)startProgress{

if (self.pictureUrlString) {

    //子线程
    [GCDQueue executeInGlobalQueue:^{
        //创建请求
        NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:self.pictureUrlString]];
        //因为是同步请求,会阻塞主线程(mainQueue)
        NSData *data = [NSURLConnection sendSynchronousRequest:request
                                             returningResponse:nil
                                                         error:nil];
        //获取图片
        UIImage *image = [[UIImage alloc]initWithData:data];
        //对图片进行模糊
        UIImage *blurImage = [image blurImage];
        //主线程
        [GCDQueue executeInMainQueue:^{
            //加载图片
            self.imageView.image = blurImage;
            //动画效果
            [UIView animateWithDuration:3.f
                             animations:^{
                                 self.imageView.alpha = 1.f;
                             }];
        }];

    }];
}
}

@synthesize contentMode = _contentMode;

- (void)setContentMode:(UIViewContentMode)contentMode {
_contentMode = contentMode;
self.imageView.contentMode = contentMode;
}

- (UIViewContentMode)contentMode {
return _contentMode;
}
@end

内容填充模式contentMode

//内容填充模式(图片怎样填入)
blurDownloadView.contentMode = UIViewContentModeScaleAspectFit;

透明度渐变采用动画设定alpha值

[UIView animateWithDuration:3.f
                             animations:^{
                                 self.imageView.alpha = 1.f;
                             }];