版本記錄

前言

在app中污尉，類似頭條的視頻播放，在播放列表里面坦袍，會(huì)有背景是處理成模糊效果的，這中效果給人很新奇的感覺等太。這一篇捂齐，就仿照實(shí)現(xiàn)頭條的模糊效果。感興趣的可以看看我寫的其他小技巧
1. 實(shí)用小技巧（一）：UIScrollView中上下左右滾動(dòng)方向的判斷

2. 實(shí)用小技巧（二）：屏幕橫豎屏的判斷和相關(guān)邏輯
3.實(shí)用小技巧（三）：點(diǎn)擊手勢(shì)屏蔽子視圖的響應(yīng)
4.實(shí)用小技巧（四）：動(dòng)態(tài)的增刪標(biāo)簽視圖
5.實(shí)用小技巧（五）：通過相冊(cè)或者相機(jī)更改圖標(biāo)
6.實(shí)用小技巧（六）：打印ios里所有字體
7. 實(shí)用小技巧（七）：UITableViewCell自適應(yīng)行高的計(jì)算
8. 實(shí)用小技巧（八）：數(shù)字余額顯示的分隔

實(shí)現(xiàn)目標(biāo)

類似頭條的視頻缩抡，會(huì)有很多模糊的效果奠宜，我截了兩張圖包颁，大約就是這個(gè)效果。

實(shí)例1

示例2

大家可以看見熊貓和吾六一兩邊的都是模糊的效果压真。下面我就實(shí)現(xiàn)一個(gè)這種效果娩嚼。

實(shí)現(xiàn)過程

下面還是直接看代碼，寫一個(gè)UIImageView的分類滴肿。

#import <Foundation/Foundation.h>

@interface UIImageView (ZBUntil)

- (void)sd_setGaussFuzzyImageWithURL:(nullable NSURL *)url placeholderImage:(nullable UIImage *)placeholder;

@end

#import "UIImageView+ZBUntil.h"

@implementation UIImageView (ZBUntil)

- (void)sd_setGaussFuzzyImageWithURL:(nullable NSURL *)url placeholderImage:(nullable UIImage *)placeholder 
{  
    self.contentMode = UIViewContentModeScaleToFill;
    
    NSArray *subViewsArr = self.subviews;
    [subViewsArr enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if (obj.tag == 100) {
            [obj removeFromSuperview];
        }
    }];
    
    UIImageView *gaosiView = [[UIImageView alloc] init];
    gaosiView.tag = 100;
    gaosiView.contentMode = UIViewContentModeScaleAspectFit;
    [self addSubview:gaosiView];
    [gaosiView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.right.top.bottom.mas_equalTo(self);
    }];
    gaosiView.image = [UIImage boxblurImage:placeholder withBlurNumber:0.5f];
    [self sd_setImageWithURL:url placeholderImage:placeholder options:0 progress:nil completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
        if (image) {
            self.image = [UIImage boxblurImage:image withBlurNumber:0.5f];
            gaosiView.image = image;
        }
    }];
}

@end

+  (UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blu;

+(UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur
{
    if (!image) {
        return nil;
    }
    if (blur < 0.f || blur > 1.f) {
        blur = 0.5f;
    }
    int boxSize = (int)(blur * 40);
    boxSize = boxSize - (boxSize % 2) + 1;
    CGImageRef img = image.CGImage;
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void *pixelBuffer;
    //從CGImage中獲取數(shù)據(jù)
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    //設(shè)置從CGImage獲取對(duì)象的屬性
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
    if(pixelBuffer == NULL)
        NSLog(@"No pixelbuffer");
    outBuffer.data = pixelBuffer;
    outBuffer.width = CGImageGetWidth(img);
    outBuffer.height = CGImageGetHeight(img);
    outBuffer.rowBytes = CGImageGetBytesPerRow(img);
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
    if (error) {
        NSLog(@"error from convolution %ld", error);
    }
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef ctx = CGBitmapContextCreate( outBuffer.data, outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes, colorSpace, kCGImageAlphaNoneSkipLast);
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];
    //clean up CGContextRelease(ctx);
    CGColorSpaceRelease(colorSpace);
    free(pixelBuffer);
    CFRelease(inBitmapData);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(imageRef);
    return returnImage;
}

這里有幾句代碼我一開始的時(shí)候并沒有加岳悟。

    NSArray *subViewsArr = self.subviews;
    [subViewsArr enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if (obj.tag == 100) {
            [obj removeFromSuperview];
        }
    }];

但是，如果不加泼差，就會(huì)發(fā)現(xiàn)有些對(duì)象釋放不掉贵少，運(yùn)行出來的視圖查看層次也是很多疊在一起的。效果如下：

效果1

效果2

下面我們查看圖層堆缘。

效果1圖層

效果2圖層

大家可以看到效果1中有間隙漏出來了滔灶，效果2中圖像根本不對(duì)，上一個(gè)cell的圖像漏出來了吼肥，說明上一個(gè)圖像并沒有釋放录平。加上我剛才寫的那幾行代碼就可以了，就可以釋放和正常顯示了缀皱。

實(shí)現(xiàn)效果

下面我們看一下最終的實(shí)現(xiàn)效果斗这。

效果1

效果2

效果3

后記

這個(gè)效果挺有意思，就是一個(gè)高斯模糊唆鸡，希望大家感興趣的留言討論涝影，謝謝大家。

風(fēng)景真美