iOS之模糊效果

App設計時往往會用到一些模糊效果或者毛玻璃效果,iOS目前已提供一些模糊API可以讓我們方便是使用。
話說蘋果在iOS7.0之後,很多系統界面都使用了毛玻璃效果,增加了界面的美觀性,但是其iOS7.0的SDK並沒有提供給開發者實現毛玻璃效果的API,所以很多人都是通過一些別人封裝的框架來實現;

Core Image

iOS5.0之後就出現了Core Image的API,Core Image的API被放在CoreImage.framework庫中, 在iOS和OS X平臺上,Core Image都提供了大量的濾鏡(Filter),在OS X上有120多種Filter,而在iOS上也有90多。

//消耗內存,Core Image
- (UIImage *)imageWithBlurImage:(const UIImage *)theImage intputRadius:(const CGFloat)radius{

    //  CIContext. 所有圖像處理都是在一個CIContext 中完成的
        CIContext *context = [CIContext contextWithOptions:nil];

        //  CIImage. 這個類保存圖像數據。它可以從UIImage、圖像文件、或者是像素數據中構造出來。
        CIImage *inputImage = [CIImage imageWithCGImage:theImage.CGImage];

        //  CIFilter. 濾鏡類包含一個字典結構,對各種濾鏡定義了屬於他們各自的屬性。濾鏡有很多種,比如鮮豔程度濾鏡,色彩反轉濾鏡,剪裁濾鏡等等。
        CIFilter *blurFilter1 = [CIFilter filterWithName:@"CIGaussianBlur"];

        // filter是按照名字來創建的CIGaussianBlur不能更改
        [blurFilter1 setValue:inputImage forKey:kCIInputImageKey];
        [blurFilter1 setValue:[NSNumber numberWithFloat:radius] forKey:@"inputRadius"];

        // 修改radius可以更改模糊程度
        CIImage *result = [blurFilter1 valueForKey:kCIOutputImageKey];

        CGImageRef cgImage = [context createCGImage:result fromRect:[inputImage extent]];

        UIImage *returnImage = [UIImage imageWithCGImage:cgImage];
        CGImageRelease(cgImage);
        UIGraphicsEndImageContext();
        // 即使使用ARC也要加上這個release,因爲ARC不管理CGImageRef,不釋放會內存泄露
        return returnImage;
}

vImage 方式

其實,說完上面的Core Image和GPUImage,很多情況下就已經足夠用了。下面我們再來看一個,那就是vImage。vImage也是蘋果推出的庫,在Accelerate.framework中。

Accelerate這個framework主要是用來做數字信號處理、圖像處理相關的向量、矩陣運算的庫。我們可以認爲我們的圖像都是由向量或者矩陣數據構成的,Accelerate裏既然提供了高效的數學運算API,自然就能方便我們對圖像做各種各樣的處理。

基於vImage我們可以根據圖像的處理原理直接做模糊效果,或者使用現有的工具。UIImage+ImageEffects是個很好的圖像處理庫,看名字也知道是對UIImage做的分類擴展。這個工具被廣泛地使用着。

GPUImage(第三方庫)

iOS在視覺方面有許多改變,其中非常吸引人的功能之一就是在整個系統中巧妙的使用了模糊效果。許多第三方應用程序已經採用了這樣的設計細節,並以各種奇妙的和具有創造性的方式使用它。GPUImage是由Brad Larson創建的,是一個基於GPU圖像和視頻處理的開源iOS框架,提供各種各樣的圖像處理濾鏡,並且支持照相機和攝像機的實時濾鏡; 基於GPU的圖像加速,因此可以加速對實時攝像頭視頻、電影以及image的濾鏡和其它效果處理,並且能夠自定義圖像濾鏡,同時它還擁有出色的性能,並且它的性能要比蘋果內置的相關APIs出色。。

開源框架GPUImage 的簡單說明

#import "GLProgram.h"

// Base classes
#import "GPUImageOpenGLESContext.h"
#import "GPUImageOutput.h"
#import "GPUImageView.h"
#import "GPUImageVideoCamera.h"
#import "GPUImageStillCamera.h"
#import "GPUImageMovie.h"
#import "GPUImagePicture.h"
#import "GPUImageRawDataInput.h"
#import "GPUImageRawDataOutput.h"
#import "GPUImageMovieWriter.h"
#import "GPUImageFilterPipeline.h"
#import "GPUImageTextureOutput.h"
#import "GPUImageFilterGroup.h"
#import "GPUImageTextureInput.h"
#import "GPUImageUIElement.h"
#import "GPUImageBuffer.h"

// Filters
#import "GPUImageFilter.h"
#import "GPUImageTwoInputFilter.h"


#pragma mark - 調整顏色 Handle Color

#import "GPUImageBrightnessFilter.h" //亮度
#import "GPUImageExposureFilter.h" //曝光
#import "GPUImageContrastFilter.h" //對比度
#import "GPUImageSaturationFilter.h" //飽和度
#import "GPUImageGammaFilter.h" //伽馬線
#import "GPUImageColorInvertFilter.h" //反色
#import "GPUImageSepiaFilter.h" //褐色(懷舊)
#import "GPUImageLevelsFilter.h" //色階
#import "GPUImageGrayscaleFilter.h" //灰度
#import "GPUImageHistogramFilter.h" //色彩直方圖,顯示在圖片上
#import "GPUImageHistogramGenerator.h" //色彩直方圖
#import "GPUImageRGBFilter.h" //RGB
#import "GPUImageToneCurveFilter.h" //色調曲線
#import "GPUImageMonochromeFilter.h" //單色
#import "GPUImageOpacityFilter.h" //不透明度
#import "GPUImageHighlightShadowFilter.h" //提亮陰影
#import "GPUImageFalseColorFilter.h" //色彩替換(替換亮部和暗部色彩)
#import "GPUImageHueFilter.h" //色度
#import "GPUImageChromaKeyFilter.h" //色度鍵
#import "GPUImageWhiteBalanceFilter.h" //白平橫
#import "GPUImageAverageColor.h" //像素平均色值
#import "GPUImageSolidColorGenerator.h" //純色
#import "GPUImageLuminosity.h" //亮度平均
#import "GPUImageAverageLuminanceThresholdFilter.h" //像素色值亮度平均,圖像黑白(有類似漫畫效果)
#import "GPUImageLookupFilter.h" //lookup 色彩調整
#import "GPUImageAmatorkaFilter.h" //Amatorka lookup
#import "GPUImageMissEtikateFilter.h" //MissEtikate lookup
#import "GPUImageSoftEleganceFilter.h" //SoftElegance lookup


#pragma mark - 圖像處理 Handle Image

#import "GPUImageCrosshairGenerator.h" //十字
#import "GPUImageLineGenerator.h" //線條
#import "GPUImageTransformFilter.h" //形狀變化
#import "GPUImageCropFilter.h" //剪裁
#import "GPUImageSharpenFilter.h" //銳化
#import "GPUImageUnsharpMaskFilter.h" //反遮罩銳化
#import "GPUImageFastBlurFilter.h" //模糊
#import "GPUImageGaussianBlurFilter.h" //高斯模糊
#import "GPUImageGaussianSelectiveBlurFilter.h" //高斯模糊,選擇部分清晰
#import "GPUImageBoxBlurFilter.h" //盒狀模糊
#import "GPUImageTiltShiftFilter.h" //條紋模糊,中間清晰,上下兩端模糊
#import "GPUImageMedianFilter.h" //中間值,有種稍微模糊邊緣的效果
#import "GPUImageBilateralFilter.h" //雙邊模糊
#import "GPUImageErosionFilter.h" //侵蝕邊緣模糊,變黑白
#import "GPUImageRGBErosionFilter.h" //RGB侵蝕邊緣模糊,有色彩
#import "GPUImageDilationFilter.h" //擴展邊緣模糊,變黑白
#import "GPUImageRGBDilationFilter.h" //RGB擴展邊緣模糊,有色彩
#import "GPUImageOpeningFilter.h" //黑白色調模糊
#import "GPUImageRGBOpeningFilter.h" //彩色模糊
#import "GPUImageClosingFilter.h" //黑白色調模糊,暗色會被提亮
#import "GPUImageRGBClosingFilter.h" //彩色模糊,暗色會被提亮
#import "GPUImageLanczosResamplingFilter.h" //Lanczos重取樣,模糊效果
#import "GPUImageNonMaximumSuppressionFilter.h" //非最大抑制,只顯示亮度最高的像素,其他爲黑
#import "GPUImageThresholdedNonMaximumSuppressionFilter.h" //與上相比,像素丟失更多
#import "GPUImageSobelEdgeDetectionFilter.h" //Sobel邊緣檢測算法(白邊,黑內容,有點漫畫的反色效果)
#import "GPUImageCannyEdgeDetectionFilter.h" //Canny邊緣檢測算法(比上更強烈的黑白對比度)
#import "GPUImageThresholdEdgeDetectionFilter.h" //閾值邊緣檢測(效果與上差別不大)
#import "GPUImagePrewittEdgeDetectionFilter.h" //普瑞維特(Prewitt)邊緣檢測(效果與Sobel差不多,貌似更平滑)
#import "GPUImageXYDerivativeFilter.h" //XYDerivative邊緣檢測,畫面以藍色爲主,綠色爲邊緣,帶彩色
#import "GPUImageHarrisCornerDetectionFilter.h" //Harris角點檢測,會有綠色小十字顯示在圖片角點處
#import "GPUImageNobleCornerDetectionFilter.h" //Noble角點檢測,檢測點更多
#import "GPUImageShiTomasiFeatureDetectionFilter.h" //ShiTomasi角點檢測,與上差別不大
#import "GPUImageMotionDetector.h" //動作檢測
#import "GPUImageHoughTransformLineDetector.h" //線條檢測
#import "GPUImageParallelCoordinateLineTransformFilter.h" //平行線檢測
#import "GPUImageLocalBinaryPatternFilter.h" //圖像黑白化,並有大量噪點
#import "GPUImageLowPassFilter.h" //用於圖像加亮
#import "GPUImageHighPassFilter.h" //圖像低於某值時顯示爲黑


#pragma mark - 視覺效果 Visual Effect

#import "GPUImageSketchFilter.h" //素描
#import "GPUImageThresholdSketchFilter.h" //閥值素描,形成有噪點的素描
#import "GPUImageToonFilter.h" //卡通效果(黑色粗線描邊)
#import "GPUImageSmoothToonFilter.h" //相比上面的效果更細膩,上面是粗曠的畫風
#import "GPUImageKuwaharaFilter.h" //桑原(Kuwahara)濾波,水粉畫的模糊效果;處理時間比較長,慎用
#import "GPUImageMosaicFilter.h" //黑白馬賽克
#import "GPUImagePixellateFilter.h" //像素化
#import "GPUImagePolarPixellateFilter.h" //同心圓像素化
#import "GPUImageCrosshatchFilter.h" //交叉線陰影,形成黑白網狀畫面
#import "GPUImageColorPackingFilter.h" //色彩丟失,模糊(類似監控攝像效果)
#import "GPUImageVignetteFilter.h" //暈影,形成黑色圓形邊緣,突出中間圖像的效果
#import "GPUImageSwirlFilter.h" //漩渦,中間形成捲曲的畫面
#import "GPUImageBulgeDistortionFilter.h" //凸起失真,魚眼效果
#import "GPUImagePinchDistortionFilter.h" //收縮失真,凹面鏡
#import "GPUImageStretchDistortionFilter.h" //伸展失真,哈哈鏡
#import "GPUImageGlassSphereFilter.h" //水晶球效果
#import "GPUImageSphereRefractionFilter.h" //球形折射,圖形倒立
#import "GPUImagePosterizeFilter.h" //色調分離,形成噪點效果
#import "GPUImageCGAColorspaceFilter.h" //CGA色彩濾鏡,形成黑、淺藍、紫色塊的畫面
#import "GPUImagePerlinNoiseFilter.h" //柏林噪點,花邊噪點
#import "GPUImage3x3ConvolutionFilter.h" //3x3卷積,高亮大色塊變黑,加亮邊緣、線條等
#import "GPUImageEmbossFilter.h" //浮雕效果,帶有點3d的感覺
#import "GPUImagePolkaDotFilter.h" //像素圓點花樣
#import "GPUImageHalftoneFilter.h" //點染,圖像黑白化,由黑點構成原圖的大致圖形


#pragma mark - 混合模式 Blend

#import "GPUImageMultiplyBlendFilter.h" //通常用於創建陰影和深度效果
#import "GPUImageNormalBlendFilter.h" //正常
#import "GPUImageAlphaBlendFilter.h" //透明混合,通常用於在背景上應用前景的透明度
#import "GPUImageDissolveBlendFilter.h" //溶解
#import "GPUImageOverlayBlendFilter.h" //疊加,通常用於創建陰影效果
#import "GPUImageDarkenBlendFilter.h" //加深混合,通常用於重疊類型
#import "GPUImageLightenBlendFilter.h" //減淡混合,通常用於重疊類型
#import "GPUImageSourceOverBlendFilter.h" //源混合
#import "GPUImageColorBurnBlendFilter.h" //色彩加深混合
#import "GPUImageColorDodgeBlendFilter.h" //色彩減淡混合
#import "GPUImageScreenBlendFilter.h" //屏幕包裹,通常用於創建亮點和鏡頭眩光
#import "GPUImageExclusionBlendFilter.h" //排除混合
#import "GPUImageDifferenceBlendFilter.h" //差異混合,通常用於創建更多變動的顏色
#import "GPUImageSubtractBlendFilter.h" //差值混合,通常用於創建兩個圖像之間的動畫變暗模糊效果
#import "GPUImageHardLightBlendFilter.h" //強光混合,通常用於創建陰影效果
#import "GPUImageSoftLightBlendFilter.h" //柔光混合
#import "GPUImageChromaKeyBlendFilter.h" //色度鍵混合
#import "GPUImageMaskFilter.h" //遮罩混合
#import "GPUImageHazeFilter.h" //朦朧加暗
#import "GPUImageLuminanceThresholdFilter.h" //亮度閾
#import "GPUImageAdaptiveThresholdFilter.h" //自適應閾值
#import "GPUImageAddBlendFilter.h" //通常用於創建兩個圖像之間的動畫變亮模糊效果
#import "GPUImageDivideBlendFilter.h" //通常用於創建兩個圖像之間的動畫變暗模糊效果

UIVisualEffectView

在iOS 8後,蘋果開放了不少創建特效的接口,其中就包括創建毛玻璃(blur)的接口。
通常要想創建一個特殊效果(如blur效果),可以創建一個UIVisualEffectView視圖對象,這個對象提供了一種簡單的方式來實現複雜的視覺效果。這個可以把這個對象看作是效果的一個容器,實際的效果會影響到該視圖對象底下的內容,或者是添加到該視圖對象的contentView中的內容。

UIImageView *imageview = [[UIImageView alloc] init];

imageview.frame = CGRectMake(10, 100, 300, 300);

imageview.image = [UIImage imageNamed:@"123"];

imageview.contentMode = UIViewContentModeScaleAspectFit;

imageview.userInteractionEnabled = YES;

[self.view addSubview:imageview];

UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *effectview = [[UIVisualEffectView alloc] initWithEffect:blur];

effectview.frame = CGRectMake(0, 0, imageview.size.width/2, 300);

[imageview addSubview:effectview];

UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];

btn.frame = CGRectMake(10, 50, 100, 40);

[btn setTitle:@"btn" forState:UIControlStateNormal];

[effectview.contentView addSubview:btn];

這段代碼是在當前視圖控制器上添加了一個UIImageView作爲背景圖。然後在視圖的一小部分中使用了blur效果。
我們可以看到UIVisualEffectView還是非常簡單的。需要注意是的,不應該直接添加子視圖到UIVisualEffectView視圖中,而是應該添加到UIVisualEffectView對象的contentView中。
另外,儘量避免將UIVisualEffectView對象的alpha值設置爲小於1.0的值,因爲創建半透明的視圖會導致系統在離屏渲染時去對UIVisualEffectView對象及所有的相關的子視圖做混合操作。這不但消耗CPU/GPU,也可能會導致許多效果顯示不正確或者根本不顯示。

發佈了5 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章