介绍 iOS 中以下四种方式实现：
CoreImage 中的模糊滤镜UIImage + ImageEffects 的 category 模糊效果- iOS8 中
UIVisualEffectView 模糊效果
- iOS7 以后通过
UIToolBar 实现模糊效果
CoreImage 中的模糊滤镜实现
CoreImage 主要通过 CIFilter 这个类来实现。
这个类支持的滤镜多达 14 类，每个类又细分多款滤镜：
- CICategoryBlur
- CIBoxBlur
- CIDiscBlur
- CIGaussianBlur
- CIMaskedVariableBlur
- CIMedianFilter
- CIMotionBlur
- CINoiseReduction
- CIZoomBlur
- CICategoryColorAdjustment
- CIColorClamp
- CIColorControls
- CIColorMatrix
- CIColorPolynomial
- CIExposureAdjust
- CIGammaAdjust
- CIHueAdjust
- CILinearToSRGBToneCurve
- CISRGBToneCurveToLinear
- CITemperatureAndTint
- CIToneCurve
- CIVibrance
- CIWhitePointAdjust
- CICategoryColorEffect
- CICategoryCompositeOperation
- CICategoryDistortionEffect
- CICategoryGenerator
- CICategoryGeometryAdjustment
- CICategoryGradient
- CICategoryHalftoneEffect
- CICategoryReduction
- CICategorySharpen
- CICategoryStylize
- CICategoryTileEffect
- CICategoryTransition
我们这里使用的是高斯模糊，也就是 CIGaussianBlur 。
Sample Code：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
UIImage *avatar = [UIImage imageNamed:@"avatar"];
/********** CoreImage ************/
// CIImage
CIImage *ciImage = [[CIImage alloc] initWithImage:avatar];
// CIFilter
CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
// 设置模糊滤镜半径
[blurFilter setValue:@(20) forKey:@"inputRadius"];
// 将图片输入到滤镜
[blurFilter setValue:ciImage forKey:kCIInputImageKey];
// 将处理好的图片输出
CIImage *outCiImage = [blurFilter valueForKey:kCIOutputImageKey];
// 查询可以设置的参数和一些信息
NSLog(@"%@",[blurFilter attributes]);
// CIContext
CIContext *contex = [CIContext contextWithOptions:nil];
// 获取 CGImage 句柄
CGImageRef outCGImage = [contex createCGImage:outCiImage fromRect:[outCiImage extent]];
// 最终获取到图片
UIImage *blurImage = [UIImage imageWithCGImage:outCGImage];
// 释放 CGImage 句柄
CGImageRelease(outCGImage);
|
此时 blurImage 图片就是经过滤镜处理后的图片，在放在 ImageView 上加载即可看到效果。
UIImage + ImageEffects 的 category 模糊效果
使用 Apple 开源的一个图片处理分类来实现，这个使用起来只需一行代码，简洁明了。
1
2
3
|
UIImage *blurImage = [sourceImage blurImage];
|
这里封装了一个区域模糊效果的方法
1
2
3
|
- (UIImage *)blurImageAtFrame:(CGRect)frame;
|
iOS8 中 UIVisualEffectView 模糊效果
这个效果只支持 iOS8.0 以上的版本，通过 UIVisualEffectView 来实现。
Sample Code：
1
2
3
4
5
6
7
8
9
10
|
// 1.创建模糊 view
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
// 2.设置尺寸
effectView.frame = CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, 200);
// 3.添加到 view 当中
[self.view addSubview:effectView];
|
😊Bonus:
实现 iOS 高版本通知中心炫酷的 Label 模糊效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 添加一个文本标签
UILabel *label = [[UILabel alloc] initWithFrame:effectView.bounds];
label.text = @"www.blog.wangruofeng007";
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont systemFontOfSize:30];
[effectView.contentView addSubview:label];
/***************** 添加模糊效果 *****************/
// 1.创建子模糊 view
UIVisualEffectView *subEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)effectView.effect]];
// 2.设定尺寸
subEffectView.frame = effectView.bounds;
// 3.将子模糊 view 添加到 effectView 的 contenView 才能生效
[effectView.contentView addSubview:subEffectView];
// 4.添加要显示的 view 来达到特殊的效果
[subEffectView.contentView addSubview:label];
|
效果图：
Demo 地址：
在 iOS7 以后， UINavigationBar 和 UIToolBar 自带毛玻璃模糊效果，可以通过手动创建 UIToolBar 对象，然后添加到 view 中实现，UIToolBar 区域就可以实现动态毛玻璃模糊效果。
例如在一个状态栏后方添加一个模糊 view,可以在控制器中这样实现，假设没有导航栏
1
2
| UIToolbar *statusBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 20)];
[self.view addSubview:statusBar];
|
这个方法非常简单实用😊，快去试试吧。
参考资料：