YYWebImage源码解析

2017-09-22 本文已影响0人 philiha

表示一下对原作者的崇敬之情

YYWebImage是大神郭的框架,专门用来做图片下载的...相对于每次都要SDWebImage+FLAnimatedImage来说,只导入一个YYWebImage.h还是相当方便的(额..就算是比较方便吧..谁没事老导框架玩..)

基本用法

1.从 URL 加载图片

// 加载网络图片
imageView.yy_imageURL = [NSURL URLWithString:@"http://github.com/logo.png"];
    
// 加载本地图片
imageView.yy_imageURL = [NSURL fileURLWithPath:@"/tmp/logo.png"];

2.加载动图

// 只需要把 `UIImageView` 替换为 `YYAnimatedImageView` 即可。
UIImageView *imageView = [YYAnimatedImageView new];
imageView.yy_imageURL = [NSURL URLWithString:@"http://github.com/ani.webp"];

3.渐进式图片加载

// 渐进式：边下载边显示
[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressive];
    
// 渐进式加载，增加模糊效果和渐变动画 （见本页最上方的GIF演示）
[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressiveBlur ｜ YYWebImageOptionSetImageWithFadeAnimation];

4.加载、处理图片

// 1. 下载图片
// 2. 获得图片下载进度
// 3. 调整图片大小、加圆角
// 4. 显示图片时增加一个淡入动画，以获得更好的用户体验
    
[imageView yy_setImageWithURL:url
   placeholder:nil
   options:YYWebImageOptionSetImageWithFadeAnimation
   progress:^(NSInteger receivedSize, NSInteger expectedSize) {
       progress = (float)receivedSize / expectedSize;
   }
   transform:^UIImage *(UIImage *image, NSURL *url) {
       image = [image yy_imageByResizeToSize:CGSizeMake(100, 100) contentMode:UIViewContentModeCenter];
       return [image yy_imageByRoundCornerRadius:10];
   }
   completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
       if (from == YYWebImageFromDiskCache) {
           NSLog(@"load from disk cache");
       }
   }];

5.图片缓存

YYImageCache *cache = [YYWebImageManager sharedManager].cache;
    
// 获取缓存大小
cache.memoryCache.totalCost;
cache.memoryCache.totalCount;
cache.diskCache.totalCost;
cache.diskCache.totalCount;
    
// 清空缓存
[cache.memoryCache removeAllObjects];
[cache.diskCache removeAllObjects];
    
// 清空磁盘缓存，带进度回调
[cache.diskCache removeAllObjectsWithProgressBlock:^(int removedCount, int totalCount) {
   // progress
} endBlock:^(BOOL error) {
   // end
}];

以上抄自大神郭的GitHub

UIImageView+YYWebImage类

当我们点进方法以后，发现这是一个Category 方法，里面提供了很多方法，单都是基于一个方法扩展的：

- (void)setYy_imageURL:(NSURL *)imageURL {
    [self yy_setImageWithURL:imageURL
                 placeholder:nil
                     options:kNilOptions
                     manager:nil
                    progress:nil
                   transform:nil
                  completion:nil];
}

里面可以传图片的url，默认图片，动画效果类型，下载类型，下载管理器，提供的block：进度条回调，完成回调。

这个方法是整个Category的核心，代码比较长，我们分开看。
首先是初始化一个YYWebImageManager，然后动态的添加_YYWebImageSetter属性，为的是管控整个YYImage的下载，查找有没有相同的url在下载，如果有的话就要取消操作，确保同一个url只有一个队列在下载处理：

_YYWebImageSetter *setter = objc_getAssociatedObject(self, &_YYWebImageSetterKey);
    if (!setter) {
        setter = [_YYWebImageSetter new];
        objc_setAssociatedObject(self, &_YYWebImageSetterKey, setter, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    }
    int32_t sentinel = [setter cancelWithNewURL:imageURL];

紧接着YYImage会切到主线程中，做一些配置，设置一下动画，设置一下默认图片，根据刚才的options从不同的地方获取图片：

if ((options & YYWebImageOptionSetImageWithFadeAnimation) &&
            !(options & YYWebImageOptionAvoidSetImage)) {
            if (!self.highlighted) {
                [self.layer removeAnimationForKey:_YYWebImageFadeAnimationKey];
            }
        }

        if (!imageURL) {
            if (!(options & YYWebImageOptionIgnorePlaceHolder)) {
                self.image = placeholder;
            }
            return;
        }

        // get the image from memory as quickly as possible
        UIImage *imageFromMemory = nil;
        if (manager.cache &&
            !(options & YYWebImageOptionUseNSURLCache) &&
            !(options & YYWebImageOptionRefreshImageCache)) {
            imageFromMemory = [manager.cache getImageForKey:[manager cacheKeyForURL:imageURL] withType:YYImageCacheTypeMemory];
        }
        if (imageFromMemory) {
            if (!(options & YYWebImageOptionAvoidSetImage)) {
                self.image = imageFromMemory;
            }
            if(completion) completion(imageFromMemory, imageURL, YYWebImageFromMemoryCacheFast, YYWebImageStageFinished, nil);
            return;
        }

        if (!(options & YYWebImageOptionIgnorePlaceHolder)) {
            self.image = placeholder;
        }

这里要注意的是他会在YYImageCacheMemory中寻找一次图片，也就是他默认先在内存中找一下。但是默认的方法中，我们的图片是存在YYImageCacheDisk中的。
所以现在YYImage并没有找到图片，继续往执行，他开出一个异步线程进行下载：

dispatch_async([_YYWebImageSetter setterQueue], ^{
            YYWebImageProgressBlock _progress = nil;
            if (progress) _progress = ^(NSInteger receivedSize, NSInteger expectedSize) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    progress(receivedSize, expectedSize);
                });
            };

            __block int32_t newSentinel = 0;
            __block __weak typeof(setter) weakSetter = nil;
            YYWebImageCompletionBlock _completion = ^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
                __strong typeof(_self) self = _self;
                BOOL setImage = (stage == YYWebImageStageFinished || stage == YYWebImageStageProgress) && image && !(options & YYWebImageOptionAvoidSetImage);
                dispatch_async(dispatch_get_main_queue(), ^{
                    BOOL sentinelChanged = weakSetter && weakSetter.sentinel != newSentinel;
                    if (setImage && self && !sentinelChanged) {
                        BOOL showFade = ((options & YYWebImageOptionSetImageWithFadeAnimation) && !self.highlighted);
                        if (showFade) {
                            CATransition *transition = [CATransition animation];
                            transition.duration = stage == YYWebImageStageFinished ? _YYWebImageFadeTime : _YYWebImageProgressiveFadeTime;
                            transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
                            transition.type = kCATransitionFade;
                            [self.layer addAnimation:transition forKey:_YYWebImageFadeAnimationKey];
                        }
                        self.image = image;
                    }
                    if (completion) {
                        if (sentinelChanged) {
                            completion(nil, url, YYWebImageFromNone, YYWebImageStageCancelled, nil);
                        } else {
                            completion(image, url, from, stage, error);
                        }
                    }
                });
            };

            newSentinel = [setter setOperationWithSentinel:sentinel url:imageURL options:options manager:manager progress:_progress transform:transform completion:_completion];
            weakSetter = setter;
        });

核心代码是:
newSentinel = [setter setOperationWithSentinel:sentinel url:imageURL options:options manager:manager progress:_progress transform:transform completion:_completion];

YYWebImageOperation.h类

点进去以后看，发现又是一坨，仔细看会发现，大部分是赋值和一些判断，最关键的创建一个请求去获取图片：

NSOperation *operation = [manager requestImageWithURL:imageURL options:options progress:progress transform:transform completion:completion];

作者对NSOperation进行了自定义，他创建了一个YYWebImageOperation，这是YYImage请求的核心。首先他重写了start方法

- (void)start {
    @autoreleasepool {
        [_lock lock];
        self.started = YES;
        if ([self isCancelled]) {
            [self performSelector:@selector(_cancelOperation) onThread:[[self class] _networkThread] withObject:nil waitUntilDone:NO modes:@[NSDefaultRunLoopMode]];
            self.finished = YES;
        } else if ([self isReady] && ![self isFinished] && ![self isExecuting]) {
            if (!_request) {
                self.finished = YES;
                if (_completion) {
                    NSError *error = [NSError errorWithDomain:NSURLErrorDomain code:NSURLErrorFileDoesNotExist userInfo:@{NSLocalizedDescriptionKey:@"request in nil"}];
                    _completion(nil, _request.URL, YYWebImageFromNone, YYWebImageStageFinished, error);
                }
            } else {
                self.executing = YES;
                [self performSelector:@selector(_startOperation) onThread:[[self class] _networkThread] withObject:nil waitUntilDone:NO modes:@[NSDefaultRunLoopMode]];
                if ((_options & YYWebImageOptionAllowBackgroundTask) && _YYSharedApplication()) {
                    __weak __typeof__ (self) _self = self;
                    if (_taskID == UIBackgroundTaskInvalid) {
                        _taskID = [_YYSharedApplication() beginBackgroundTaskWithExpirationHandler:^{
                            __strong __typeof (_self) self = _self;
                            if (self) {
                                [self cancel];
                                self.finished = YES;
                            }
                        }];
                    }
                }
            }
        }
        [_lock unlock];
    }
}

这个start方法主要是对队列的一些控制，他会再分出一个网络线程networkThread去做网络请求工作。我们顺着往下看，他进入了：
-(void)_startOperation
这里还没进入请求，YYImage会去查看硬盘内存中的图片，如果有就会执行：
UIImage *image = [self.cache getImageForKey:self.cacheKey withType:YYImageCacheTypeDisk];
如果没有的话，就会去执行_startRequest方法，然后我们就看到了最重要的一段代码：

if (![self isCancelled]) {
            _connection = [[NSURLConnection alloc] initWithRequest:_request delegate:[_YYWebImageWeakProxy proxyWithTarget:self]];
            if (![_request.URL isFileURL] && (_options & YYWebImageOptionShowNetworkActivity)) {
                [YYWebImageManager incrementNetworkActivityCount];
            }
        }

这里请求还是用的快要淘汰的NSURLConnection，- -让人潸然泪下....接下来就是一些回调了。整个流程结束！
整个流程图如下：

image.png

小总结

由此看出YYImage使用非常简单，但内部构造比较复杂。主要的核心模块是：_YYWebImageSetter，YYImageCache，YYWebImageManager，YYWebImageOperation。分工有序，结构清晰，美中不足的是请求方式还是基于快要淘汰的NSURLConnection。不过要修改起来也比较容易，之后我会对YYImage的其他功能做介绍分析，如果你感兴趣可以关注我。

加载Gif动态图

基本使用

YYImage加载gif使用的是YYAnimatedImageView类。我们首先要新建一个YYAnimatedImageView对象：
YYAnimatedImageView *imageView=[YYAnimatedImageView new];
然后后两种加载UIimage的方式：
1.通过URL加载
NSURL *path = [[NSBundle mainBundle]URLForResource:@"guidegif" withExtension:@"gif"]; imageView.yy_imageURL = path;
2.通过YYImage加载
NSURL *path = [[NSBundle mainBundle]URLForResource:@"guidegif_loop" withExtension:@"gif"]; YYImage * image = [YYImage imageWithContentsOfFile:path.path]; imageView.image = image;

YYAnimatedImageView类

他是YYImage加载gif的专供类。他继承于UIImageView，提供了位数不多的几个接口:

@property (nonatomic) BOOL autoPlayAnimatedImage;
@property (nonatomic) NSUInteger currentAnimatedImageIndex;
@property (nonatomic, readonly) BOOL currentIsPlayingAnimation;
@property (nonatomic, copy) NSString *runloopMode;
@property (nonatomic) NSUInteger maxBufferSize;

其中一个还是只读的，并不能设置。这里很不人性化，因为连最起码的loop数量都不开放出来，都写在了.m里面。

我们进入YYAnimatedImageView.m后会发现其实YYAnimatedImageView作为子类重写了很多父类的方法，所以很多设置方法我们要点入进去才能看到。我们顺着运行顺序看下去，首先是对image属性的赋值，这里面最核心的方法是：

- (void)setImage:(id)image withType:(YYAnimatedImageType)type {
    [self stopAnimating];
    if (_link) [self resetAnimated];
    _curFrame = nil;
    switch (type) {
        case YYAnimatedImageTypeNone: break;
        case YYAnimatedImageTypeImage: super.image = image; break;
        case YYAnimatedImageTypeHighlightedImage: super.highlightedImage = image; break;
        case YYAnimatedImageTypeImages: super.animationImages = image; break;
        case YYAnimatedImageTypeHighlightedImages: super.highlightedAnimationImages = image; break;
    }
    [self imageChanged];
}

所有的对image的设置都会走到这里。主要是暂停动画，然后对image的一个设置，同时进入imageChanged。imageChanged里面主要是一些逻辑处理没什么说的，里面最关键的一句就是：
[self resetAnimated];
resetAnimated是整个实现gif动画的核心，想要高效的展现gif动画就必须重写系统的动画。那这里YYImage的实现方式和FLImage是一样，通过CADisplayLink定时器去绘制gif动画。这样就会使得内存大大的减少，但是CPU的占用会比较大，是以时间换空间的做法：

- (void)resetAnimated {
    dispatch_once(&_onceToken, ^{
        _lock = dispatch_semaphore_create(1);
        _buffer = [NSMutableDictionary new];
        _requestQueue = [[NSOperationQueue alloc] init];
        _requestQueue.maxConcurrentOperationCount = 1;
        _link = [CADisplayLink displayLinkWithTarget:[_YYImageWeakProxy proxyWithTarget:self] selector:@selector(step:)];
        if (_runloopMode) {
            [_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:_runloopMode];
        }
        _link.paused = YES;

        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didReceiveMemoryWarning:) name:UIApplicationDidReceiveMemoryWarningNotification object:nil];
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didEnterBackground:) name:UIApplicationDidEnterBackgroundNotification object:nil];
    });

    [_requestQueue cancelAllOperations];
    LOCK(
         if (_buffer.count) {
             NSMutableDictionary *holder = _buffer;
             _buffer = [NSMutableDictionary new];
             dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
                 // Capture the dictionary to global queue,
                 // release these images in background to avoid blocking UI thread.
                 [holder class];
             });
         }
    );
    _link.paused = YES;
    _time = 0;
    if (_curIndex != 0) {
        [self willChangeValueForKey:@"currentAnimatedImageIndex"];
        _curIndex = 0;
        [self didChangeValueForKey:@"currentAnimatedImageIndex"];
    }
    _curAnimatedImage = nil;
    _curFrame = nil;
    _curLoop = 0;
    _totalLoop = 0;
    _totalFrameCount = 1;
    _loopEnd = NO;
    _bufferMiss = NO;
    _incrBufferCount = 0;
}

这里要注意的是，yyimage对播放做了优化，他在显示了一张图片后，立马缓存好下一张为接下来的播放做准备，这就是他比FL更流程的关键，这句代码在他的：
-(void)step:(CADisplayLink *)link
方法中，这个方法是被CADisplayLink绑定了的。
优化的代码：

if (!bufferIsFull && _requestQueue.operationCount == 0) { // if some work not finished, wait for next opportunity
        _YYAnimatedImageViewFetchOperation *operation = [_YYAnimatedImageViewFetchOperation new];
        operation.view = self;
        operation.nextIndex = nextIndex;
        operation.curImage = image;
        [_requestQueue addOperation:operation];
    }

整个流程大致如下：