iOS 利用YYWebImage做一个加载Gif的效果

先上效果图：

加载Gif.gif

demo中的一些效果：
1、 cell的一些动画

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat viewHeight = scrollView.height + scrollView.contentInset.top;
    for (MyCell *cell in [self.tableView visibleCells]) {
        CGFloat y = cell.centerY - scrollView.contentOffset.y;
        CGFloat p = y - viewHeight / 2;
        CGFloat scale = cos(p / viewHeight * 0.8) * 0.95;
        [UIView animateWithDuration:0.15 delay:0 options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionBeginFromCurrentState animations:^{
            cell.webImageView.transform = CGAffineTransformMakeScale(scale, scale);
        } completion:NULL];
    }
    
}

2、在gif 加载完成的时候添加点击tap、pan手势，点击动画以及平移手势可以观看动画的每一帧执行过程。使用的是官网demo的一个工具类。

 [YYImageExampleHelper addTapControlToAnimatedImageView:self.webImageView];
  [YYImageExampleHelper addPanControlToAnimatedImageView:self.webImageView];

3、在微信聊天或者一些APP加载Gif（比如百思不得姐）中，拖拽过程中会暂停gif动画，在停止拖动的时候可以继续动画。恰好YYWebImage的一个子类YYAnimatedImageView恰好提供了一个这样的实现：

- (void)stopAnimating {
    [super stopAnimating];
    [_requestQueue cancelAllOperations];
    _link.paused = YES;
    self.currentIsPlayingAnimation = NO;
}

- (void)startAnimating {
    YYAnimatedImageType type = [self currentImageType];
    if (type == YYAnimatedImageTypeImages || type == YYAnimatedImageTypeHighlightedImages) {
        NSArray *images = [self imageForType:type];
        if (images.count > 0) {
            [super startAnimating];
            self.currentIsPlayingAnimation = YES;
        }
    } else {
        if (_curAnimatedImage && _link.paused) {
            _curLoop = 0;
            _loopEnd = NO;
            _link.paused = NO;
            self.currentIsPlayingAnimation = YES;
        }
    }
}

我有一句牛批不知当讲不当讲，这个库简直好用的不行。（请自行略过....）

好了接下来 附上代码：

其实最主要的是是利用下面接口做文章，

- (void)yy_setImageWithURL:(NSURL *)imageURL
               placeholder:(UIImage *)placeholder
                   options:(YYWebImageOptions)options
                  progress:(YYWebImageProgressBlock)progress
                 transform:(YYWebImageTransformBlock)transform
                completion:(YYWebImageCompletionBlock)completion {
    [self yy_setImageWithURL:imageURL
                 placeholder:placeholder
                     options:options
                     manager:nil
                    progress:progress
                   transform:transform
                  completion:completion];
}

接口中有自带的一些过度动画，自己可以利用返回的加载进度做一些加载动画。因为之前写过一个圆形加载动画就直接用了。如下

进度.gif

我们需要做的就是先展示这个占位图，同步加载进度，加载完成后隐藏即可。

占位图在弱网 情况下很明显，网速太好不容易看得处理。
补充一个知识点，如何在Mac上模拟弱网环境，限制网速。
苹果官方提供了限制系统整体网速的插件，界面如下：

v2-b7a353158e82797b067578c21a811660_b.png

v2-18459c845d5ea4479ea4eca0724af903_r.png

下载地址：Sign in with your Apple ID**，登录后搜索 Additional Tools for Xcode 或 Hardware IO Tools for Xcode（不需要安装Xcode应该也可以运行），下载完成后从里面找到Network Link Conditioner，双击安装即可。

以上Gif链接均来自YYWebImage的事例demo。

最后附上demo地址 :异步加载Gif的几个效果