YYWebImage工作原理介绍-----gif动态图

前言

下面是我对realm研究的第一篇文章的传送门:YYWebImage工作原理介绍-----下载单张图片。接下来我会介绍YYWebImage的另一大功能------gif动态图播放。

如何使用

YYImage加载gif使用的是YYAnimatedImageView类。我们首先要新建一个YYAnimatedImageView对象:

  YYAnimatedImageView *imageView=[YYAnimatedImageView new];

然后后两种加载UIimage的方式:

  • 直接通过url加载:
  NSURL *path = [[NSBundle mainBundle]URLForResource:@"guidegif" withExtension:@"gif"];
  imageView.yy_imageURL = path;
  • 通过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];
    }

整个流程大致如下:


总结

YYImage播放gif的能力,是我见过的图片库中最强的。他的流畅和易用值得我们把FL替换掉。美中不足的是他给我们提供的借口太少,我们能完成的功能也就是不停的播放gif。虽然YYImage还提供了一个YYSpriteSheetImage,但是配置比较复杂,而且不能加载gif,只能是图片数组。加载UIImage的时候,推荐用第二种方法--先变成YYImag,因为直接用url可能一开始会找不到图片,造成屏幕闪烁的情况。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4 60
  • No. 1 [UIWindow endDisablingInterfaceAutorotationAnimated...
    CyrusCao阅读 900评论 0 51
  • 夜色己经把明亮的窗户浸染, 受了伤的女人站在窗前吸烟。 偶然也会传来嘶哑着的歌声, 那是某个窗口传出的疯狂渲泄。 ...
    天山木兰阅读 216评论 0 0
  • 你认识的那个少年,会不会笑着消失在人海。 以后的以后,再也不可能遇到。 世界很小,小到你总以为下一秒就会再次相...
    声张_6b64阅读 565评论 0 0
  • 生活兜兜转转成现在的模样,不单单是运气不好了些,这是就是前因后果。 一切都会过去,可是麻烦迟迟还在跟我周旋,有的时...
    熊二不三阅读 684评论 0 2