iOS毛玻璃效果的實現方法

ios開發中常常用到的毛玻璃效果實現方法

iOS8以后使用系統里的UIBlurEffect可以實現,UIBlurEffect繼承自UIVisualEffect

UIBlurEffectStyle有三個值,UIBlurEffectStyleLight , UIBlurEffectStyleExtraLight , UIBlurEffectStyleDark,可以控制毛玻璃的效果.

    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]; UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect]; //必須給effcetView的frame賦值,因為UIVisualEffectView是一個加到UIIamgeView上的子視圖. effectView.frame = _imageView.bounds; [self.imageView addSubview:effectView]; 

UIVibrancyEffect也繼承自UIVisualEffect類,可以用來設置一些特殊的效果.代碼如下

    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect]; effectView.frame = _imageView.bounds; UIVibrancyEffect *viBrancyeffect = [UIVibrancyEffect effectForBlurEffect:effect]; UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:viBrancyeffect]; vibrancyEffectView.frame = CGRectMake(100, 0, 200, 200); UILabel *lbl = [[UILabel alloc] init]; lbl.text = @"測試Label"; lbl.font = [UIFont systemFontOfSize:25]; lbl.frame = CGRectMake(0, 0, 200, 200); [vibrancyEffectView.contentView addSubview:lbl]; [effectView.contentView addSubview:vibrancyEffectView]; [self.imageView addSubview:effectView]; 

但是這種毛玻璃效果不能很好的控制模糊效果,可以alpha屬性控制並不完美.
效果如下:

使用系統CoreImage中的濾鏡產生毛玻璃效果

原理是給圖片添加濾鏡,這種方式相比上面更為可控,下面介紹一下系統濾鏡中支持的毛玻璃效果

先簡要介紹一下系統濾鏡CIFilter的使用

CIfilter中有一個專門用於毛玻璃效果的Category : kCICategoryBlur
使用下面的代碼可以打印出這個分類下的濾鏡

NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBlur]; 

可以得到結果

**    CIBoxBlur,** ** CIDiscBlur,** ** CIGaussianBlur,** ** CIMaskedVariableBlur,** ** CIMedianFilter,** ** CIMotionBlur,** ** CINoiseReduction,** ** CIZoomBlur** 

我們使用最常見的高斯模糊 (Gaussian Blur) 來進行舉例

NSArray *inputKeys = filter.inputKeys; 

可以得到這個濾鏡支持兩個輸入屬性,分別是inputImage,inputRadius
其中inputImage指你需要添加濾鏡效果的圖片,inputRadius指進行高斯模糊的程度
設置屬性的方式有兩種
一種是直接通過NSDictionary賦值

CIImage *testCIImage = [CIImage imageWithCGImage:[UIImage imageNamed:@"testImg.jpg"].CGImage]; NSDictionary *filterAttDict = @{@"inputImage" : testCIImage ,@"inputRadius" : [NSNumber numberWithDouble:5.0f]}; CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur" withInputParameters:filterAttDict]; CIImage *outPutCIImage = [filter outputImage]; CIContext *ciContext = [CIContext contextWithOptions:nil]; CGImageRef cgImage = [ciContext createCGImage:outPutCIImage fromRect:outPutCIImage.extent]; UIImage *resImage = [UIImage imageWithCGImage:cgImage]; 

另一種是通過kvc方法賦值

    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"]; CIImage *testCIImage = [CIImage imageWithCGImage:[UIImage imageNamed:@"testImg.jpg"].CGImage]; [filter setValue:testCIImage forKeyPath:kCIInputImageKey]; [filter setValue:@50 forKeyPath:kCIInputRadiusKey]; CIImage *outPutCIImage = [filter outputImage]; CIContext *ciContext = [CIContext contextWithOptions:nil]; CGImageRef cgImage = [ciContext createCGImage:outPutCIImage fromRect:outPutCIImage.extent]; UIImage *resImage = [UIImage imageWithCGImage:cgImage]; 

發現一個寫的比較詳細的博客,可以參考 http://www.jianshu.com/p/d115836ed3fa