【原】Github系列之一：一起做仿天气类应用中的实时模糊效果LiveBlur

从本文开始，我将专门开辟一个Github Code系列，开源自己写的一部分有意思而且实用的demo，共同学习。以前都发布在git OSChina上，后面有空会陆陆续续整理到Github上。OSChina最大的优点是可以免费托管私有项目，服务器在国内速度快，这些是Github所比不了的。不过Github优势在于开源氛围浓烈，有利于向各位开源大牛学习交流。长话短说，just do it!

本文只要实现随滚动实时模糊(或称为动态模糊)的效果(请见文章末尾处)，这种效果被广泛应用于各大天气类APP中，如墨迹天气、黄历天气、雅虎天气等。随着scrollView向上滚动，背景逐渐模糊，二者是相互联动的，实现起来很简单。在文章的后半部分我们尝试用两种方法实现这种效果。不过我要强调的一点是，我的一些文章的方法思路虽简单，但我更注重这个过程中对一些“坑”的处理，这是个融汇贯通的过程。比如预告一下，本文提到了几个坑：KVO陷阱、autoRelease坑、drawRect坑...

首先，我们利用KVO将scrollView的contentOffset与Image的模糊度进行绑定，这样我们就能实时检测到scrollview(本文为tableview)的滚动偏移量，从而改变image的模糊度。

在此之前，我们从UIImageView派生出子类WZLLiveBlurImageView来实现图像的模糊改变，先看头文件不管实现：

#import <UIKit/UIKit.h>
//default initial blur level
#define kImageBlurLevelDefault          0.9f
@interface WZLLiveBlurImageView : UIImageView

/**
 *  set blur level
 *
 *  @param level blur level
 */
- (void)setBlurLevel:(CGFloat)level;

@end

setBlurLevel:是唯一的方法接口给调用者调用。接着我们在一个ViewController中把这个WZLLiveBlurImageView显示出来。在ViewController中还应该有一个tableView用于模拟天气类应用的使用场景。那WZLLiveBlurImageView要放在哪里比较合适呢？tableView有一个subView叫做backgroundView，就选它了。以下是初始化代码，放在ViewController的viewDidLoad方法中：

   //generate item content for tableView
    _items = [self items];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    self.tableView.separatorColor = [UIColor clearColor];
    _blurImgView = [[WZLLiveBlurImageView alloc] initWithImage:[UIImage imageNamed:@"bg.jpg"]];
    _blurImgView.frame = self.tableView.frame;
    self.tableView.backgroundView = _blurImgView;
    self.tableView.backgroundColor = [UIColor clearColor];
    self.tableView.contentInset = UIEdgeInsetsMake(CGRectGetHeight(self.tableView.bounds) - 100, 0, 0, 0);

那我们怎么知道tableview到底滚动了多少呢？答案是KVO。KVO的使用当中是有坑的，写出一个健壮稳定的KVO需要注意很多细节，比如要小心崩溃问题，要防止KVO链断开等...对KVO不熟的同学请移步我的另一篇博文：《KVO使用中的陷阱》。 紧接着上面的代码，我们继续配置KVO，"contentOffset"字符串必须与tableview的属性值完全一致才有效：

    //setup kvo on tableview`s contentoffset
    [self.tableView addObserver:self forKeyPath:@"contentOffset"
                        options:NSKeyValueObservingOptionNew
                        context:(__bridge void *)(kWZLLiveBlurImageViewContext)];//kWZLLiveBlurImageViewContext是一个全局的字符串

注册与注销要成对出现，尽管是ARC，但在dealloc也要清理现场：

- (void)dealloc
{
    [self.tableView removeObserver:self forKeyPath:@"contentOffset"
                           context:(__bridge void *)kWZLLiveBlurImageViewContext];
}

添加KVO的默认回调函数，当前类的所有KVO都走的这里，建议KVO都写成如下这样，注意对super以及context的处理：

#pragma mark - KVO configuration
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    if (context == (__bridge void *)(kWZLLiveBlurImageViewContext)) {
        CGFloat blurLevel = (self.tableView.contentInset.top + self.tableView.contentOffset.y) / CGRectGetHeight(self.tableView.bounds);
        [_blurImgView setBlurLevel:blurLevel];
    } else {
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

以上代码基本就形成了实时模糊的整体框架了，现在还差WZLLiveBlurImageView中对模糊图像的实现。对UIImage进行模糊处理的代码网上有很多，基本都是同一个版本，这里我们就站在巨人的肩膀上，用一下这个算法，使用 - (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius; 方法对image进行模糊处理：

//
//  UIImage+Blur.h
//  WZLLiveBlurImageView
//
//  Created by zilin_weng on 15/3/23.
//  Copyright (c) 2015年 Weng-Zilin. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface UIImage (Blur)

- (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius;

@end

//
//  UIImage+Blur.m
//  WZLLiveBlurImageView
//
//  Created by zilin_weng on 15/3/23.
//  Copyright (c) 2015年 Weng-Zilin. All rights reserved.
//

#import "UIImage+Blur.h"
#import <Accelerate/Accelerate.h>

@implementation UIImage (Blur)

- (UIImage *)applyBlurWithRadius:(CGFloat)blur
{
    if (blur < 0.f || blur > 1.f) {
        blur = 0.5f;
    }
    int boxSize = (int)(blur * 40);
    boxSize = boxSize - (boxSize % 2) + 1;
    
    CGImageRef img = self.CGImage;
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void *pixelBuffer;
    
    //create vImage_Buffer with data from CGImageRef
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
    
    //create vImage_Buffer for output
    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);
    
    // Create a third buffer for intermediate processing
    /*void *pixelBuffer2 = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
     vImage_Buffer outBuffer2;
     outBuffer2.data = pixelBuffer2;
     outBuffer2.width = CGImageGetWidth(img);
     outBuffer2.height = CGImageGetHeight(img);
     outBuffer2.rowBytes = CGImageGetBytesPerRow(img);*/
    //perform convolution
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend)
    ?: vImageBoxConvolve_ARGB8888(&outBuffer, &inBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend)
    ?: 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,
                                             (CGBitmapInfo)kCGImageAlphaNoneSkipLast);
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx);
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];
    //clean up
    CGContextRelease(ctx);
    CGColorSpaceRelease(colorSpace);
    free(pixelBuffer);
    //free(pixelBuffer2);
    CFRelease(inBitmapData);
    CGImageRelease(imageRef);
    return returnImage;
}



@end

接下来有两种思路可供参考：（1）直接法；（2）间接法

（1）直接法

从字面上看直接法可以理解为直接改变图片的模糊度，也就是在KVO响应函数中根据tableView偏移量算出一个模糊目标值，每次目标值更新了，就做一次图像模糊处理算法。这种方法简单粗暴，思路直接。由于滚动过程中对模糊处理调用非常频繁，这个时候要特别注意性能问题。在这里影响性能问题主要有两个因素：内存跟绘图。如果内存在短时间内不能及时释放，则在小内存设备上将显得很脆弱！在内存问题上，注意到上述图像模糊算法返回的是一个autoRelease类型的对象，但是autoRelease对象并不会在作用域之外就自动释放的(what?如果你觉得惊讶，说明你对autoRelease认识还不够，建议你看看我的另一篇文章：《你真的懂autoRelease吗？》)。解决办法就是使用autoReleasePool手动干预对象的释放时机。内存问题解决了，接着是绘图问题。很多文章都说使用比UIKIt更底层的CGGraphy绘图可以达到更高的效率，于是我们写出如下代码：(函数内的单元检测是必须的)

#import "WZLLiveBlurImageView.h"
#import "UIImage+Blur.h"

@interface WZLLiveBlurImageView ()
{
    UIImage *_originImage;
    CGFloat _blurLevel;
}
@end
@implementation WZLLiveBlurImageView
- (void)setBlurLevel:(CGFloat)level
{
    if (!self.image) {
        NSLog(@"image is empty!");
        return;
    }
    _blurLevel = level;
    [self setNeedsDisplay];
}

#pragma mark - private apis
- (void)drawRect:(CGRect)rect
{
    @autoreleasepool {
        if (_originImage) {
            UIImage *blurImg = [_originImage applyBlurWithRadius:_blurLevel];
            [blurImg drawInRect:self.bounds];
        }
    }
}
@end

是不是觉得很完美，该考虑的都考虑到了。运行一下发现，图像模糊度没发生改变。为啥？因为drawRect函数根本没调用到！按command+shift+0打开APPLE文档查看UIImageVIew发现以下的描述：

苹果说的很清楚了，意思是UIImageView类已经做了优化，如果你子类化UIImageView是不会调用drawRect的！只有从UIView派生的类才允许走drawRect。虽然遇到了坑，不过我们可以放心地直接使用 self.image = xxxBlurImage; 这样的方法来更新模糊图像了。同时，为了避免 self.image = [_originImage applyBlurWithRadius:level]; 方法太耗时从而阻塞UI，我们使用GCD去处理模糊操作，处理结束后回到主线程更新image。使用GCD过程中要防止循环引用(点我点我)，下面就是完整的代码：

#import "WZLLiveBlurImageView.h"
#import "UIImage+Blur.h"

@interface WZLLiveBlurImageView ()
@property (nonatomic, strong) UIImage *originImage;
@end

@implementation WZLLiveBlurImageView
/**
 *  set blur level
 *
 *  @param level blur level
 */
- (void)setBlurLevel:(CGFloat)level
{
    if (!self.image) {
        NSLog(@"image is empty!");
        return;
    }
    level = (level > 1 ? 1 : (level < 0 ? 0 : level));
    NSLog(@"level:%@", @(level));
    //self.realBlurImageView.alpha = level;
    @autoreleasepool {
        if (_originImage) {
            __weak typeof(WZLLiveBlurImageView*) weakSelf = self;
            __block UIImage *blurImage = nil;
            dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
                blurImage = [weakSelf.originImage applyBlurWithRadius:level];
                //get back to main thread to update UI
                dispatch_async(dispatch_get_main_queue(), ^{
                    weakSelf.image = blurImage;
                });
            });
        }
    }
}

缺点是：在低性能设备上虽然可以实现滚动流畅，但由于CPU性能捉急，导致tableView已经滚动了，image才慢慢模糊，这种延时给人很差的体验。如果去掉GCD，则延时消失，但滚动卡顿严重。在写这篇文章时最新设备是iphone6p，iphone4基本淘汰。用iphone4s真机调试时，直接法hold不住。当然，模拟器无压力妥妥的，不过那又怎样！附直接法在模拟器的效果，录制过程失真了导致模糊效果看起来不自然：

========================

（2）间接法

既然直接法暂时做不了，那我们可以考虑曲线救国。我的策略是在WZLLiveBlurImageView上添加一个UIImageVIew，称为 realBlurImageView ，用 realBlurImageView 来实现真的模糊，但是只模糊一次。在tableview滚动过程中只改变 realBlurImageView 的透明度alpha。此法可谓移花接木。

#import "WZLLiveBlurImageView.h"
#import "UIImage+Blur.h"

@interface WZLLiveBlurImageView ()
@property (nonatomic, strong) UIImage *originImage;
@property (nonatomic, strong) UIImageView *realBlurImageView;
@end

@implementation WZLLiveBlurImageView

- (void)setBlurLevel:(CGFloat)level
{
    if (!self.image || !self.realBlurImageView) {
        NSLog(@"image is empty!");
        return;
    }
    level = (level > 1 ? 1 : (level < 0 ? 0 : level));
    NSLog(@"level:%@", @(level));
    self.realBlurImageView.alpha = level;
}

#pragma mark - private apis

- (void)setImage:(UIImage *)image
{
    [super setImage:image];
    if (_originImage == nil && image) {
        _originImage = image;
    }
    if (!self.realBlurImageView) {
        UIImage *blurImage = [image applyBlurWithRadius:kImageBlurLevelDefault];
        self.realBlurImageView = [[UIImageView alloc] initWithImage:blurImage];
        self.realBlurImageView.backgroundColor = [UIColor clearColor];
        self.realBlurImageView.frame = self.bounds;
        self.realBlurImageView.alpha = 0;
        [self addSubview:self.realBlurImageView];
    }
}

间接法虽然引入了新的对象，但换来了性能上的完美折中，我认为是值得的。不管是模拟器还是低性能真机，调试都OK，实时性很好：

我们抛出的问题都完美解决了，也顺带解决了一些坑。方法虽简单，但过程还是比较有意义的。最后附上整个demo的github地址.

=======================================

原创文章，转载请注明 编程小翁@博客园，邮件zilin_weng@163.com，微信Jilon，欢迎各位与我在C/C++/Objective-C/机器视觉等领域展开交流!

 ======================================