先上效果圖：

加載Gif.gif

demo中的一些效果：
1、 cell的一些動(dòng)畫

- (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 加載完成的時(shí)候添加點(diǎn)擊tap、pan手勢，點(diǎn)擊動(dòng)畫以及平移手勢可以觀看動(dòng)畫的每一幀執(zhí)行過程。使用的是官網(wǎng)demo的一個(gè)工具類。

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

3、在微信聊天或者一些APP加載Gif（比如百思不得姐）中，拖拽過程中會(huì)暫停gif動(dòng)畫，在停止拖動(dòng)的時(shí)候可以繼續(xù)動(dòng)畫。恰好YYWebImage的一個(gè)子類YYAnimatedImageView恰好提供了一個(gè)這樣的實(shí)現(xiàn)：

- (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;
        }
    }
}

我有一句牛批不知當(dāng)講不當(dāng)講，這個(gè)庫簡直好用的不行。（請自行略過....）

好了接下來 附上代碼：

其實(shí)最主要的是是利用下面接口做文章，

- (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];
}

接口中有自帶的一些過度動(dòng)畫，自己可以利用返回的加載進(jìn)度做一些加載動(dòng)畫。因?yàn)橹皩戇^一個(gè)圓形加載動(dòng)畫就直接用了。如下

進(jìn)度.gif

我們需要做的就是先展示這個(gè)占位圖，同步加載進(jìn)度，加載完成后隱藏即可。

占位圖在弱網(wǎng) 情況下很明顯，網(wǎng)速太好不容易看得處理。
補(bǔ)充一個(gè)知識點(diǎn)，如何在Mac上模擬弱網(wǎng)環(huán)境，限制網(wǎng)速。
蘋果官方提供了限制系統(tǒng)整體網(wǎng)速的插件，界面如下：

v2-b7a353158e82797b067578c21a811660_b.png

v2-18459c845d5ea4479ea4eca0724af903_r.png

下載地址：Sign in with your Apple ID**，登錄后搜索 Additional Tools for Xcode 或 Hardware IO Tools for Xcode（不需要安裝Xcode應(yīng)該也可以運(yùn)行），下載完成后從里面找到Network Link Conditioner，雙擊安裝即可。

以上Gif鏈接均來自YYWebImage的事例demo。

最后附上demo地址 :異步加載Gif的幾個(gè)效果