iOS加载网络GIF图片和本地图片

现在的APP不单单是讲究功能实在,还是得看颜值.
下面记录一下我最近在做一个显示GIF的功能列表的时候,遇到了一些小坑.
测试demo

主要用到的技术:

SDWebImage
AssetsLibrary.framework(系统自带的第三方类库)
YYWebImage

我们做iOS开发的,一般遇到加载图片,都会想到SDWebImage这个第三方类库,然而这个第三方类库我在实现对应的代码逻辑的时候,发现并不是很好处理网络加载URLgif图片格式.

1.SDWebImage

传统的加载

     //传统意义的加载
     [imgView sd_setImageWithURL:url placeholderImage:nil completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
     imgView.image = image;
     }];

加载本地

//1. 加载本地的gif图片
     FLAnimatedImageView *imgView = (FLAnimatedImageView*)[cell.contentView viewWithTag:1];
     imgView.contentMode = UIViewContentModeScaleAspectFit;
     
     NSString * bundlePath = [[ NSBundle mainBundle] pathForResource: @ "gifBundle" ofType :@ "bundle"];
     NSString *imgPath= [bundlePath stringByAppendingPathComponent :[NSString stringWithFormat:@"/%ld.gif", indexPath.row+1]];
     
     NSData  *imageData = [NSData dataWithContentsOfFile:imgPath];
     
     imgView.animatedImage = [FLAnimatedImage animatedImageWithGIFData:imageData];

在调试的时候,发行加载本地的没有问题,也没有重用的现象出现,也没有卡顿.所以我们就打算采用这个加载网络URL的GIF图片.

加载url的gif

 //2. 加载url gif 图片 (需要在故事板设置imageview的类型为FLAnimatedImageView)
     FLAnimatedImageView *imageView = (FLAnimatedImageView*)[cell.contentView viewWithTag:1];
    NSDictionary *dic = listArray[indexPath.row];
    NSURL *url = [NSURL URLWithString:[dic valueForKey:@"GIFImageURL"]];
    imageView.image = [UIImage imageNamed:@"专注.jpg"];
    
    [self loadAnimatedImageWithURL:url completion:^(FLAnimatedImage *animatedImage) {
        imageView.animatedImage = animatedImage;
    }];

异步加载

- (void)loadAnimatedImageWithURL:(NSURL *const)url completion:(void (^)(FLAnimatedImage *animatedImage))completion
{
    NSString *const filename = url.lastPathComponent;
    NSString *const diskPath = [NSHomeDirectory() stringByAppendingPathComponent:filename];
    
    NSData * __block animatedImageData = [[NSFileManager defaultManager] contentsAtPath:diskPath];
    FLAnimatedImage * __block animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:nil];
    
    if (animatedImage) {
        if (completion) {
            completion(animatedImage);
        }
    } else {
        [[[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
            animatedImageData = data;
            animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:animatedImageData];
            if (animatedImage) {
                if (completion) {
                    dispatch_async(dispatch_get_main_queue(), ^{
                        completion(animatedImage);
                    });
                }
                [data writeToFile:diskPath atomically:YES];
            }
        }] resume];
    }
}

我们发现,按照他们的使用方法来实现的时候,发行出现稍微卡顿和重用的bug.但是我们还没放弃,我们想按照加载本地的方法来加载试试.
这个时候引入类库:AssetsLibrary

FLAnimatedImageView *imgView = (FLAnimatedImageView*)[cell.contentView viewWithTag:1];
    imgView.contentMode = UIViewContentModeScaleAspectFit;

    ALAssetsLibrary *assetLibrary = [[ALAssetsLibrary alloc] init];


    void (^ALAssetsLibraryAssetForURLResultBlock)(ALAsset *) = ^(ALAsset *asset) {
        if (asset != nil) {

            ALAssetRepresentation *rep = [asset defaultRepresentation];
            Byte *imageBuffer = (Byte*)malloc(rep.size);
            NSUInteger bufferSize = [rep getBytes:imageBuffer fromOffset:0.0 length:rep.size error:nil];
            NSData *imageData = [NSData dataWithBytesNoCopy:imageBuffer length:bufferSize freeWhenDone:YES];
            FLAnimatedImage *i =  [FLAnimatedImage animatedImageWithGIFData:imageData];

            imgView.animatedImage = i;
        }
        else {
        }
    };

    [assetLibrary assetForURL:url
                  resultBlock:ALAssetsLibraryAssetForURLResultBlock
                 failureBlock:^(NSError *error) {

                 }];

    */

结果发现可以加载出来,但是GIF图片不动!!
所以我们上网查找了相关资料,发行了使用YYWebImage效果更好,更加容易实现.

PS:为什么使用FLAnimatedImageView,是因为SDWebImage之前的UIImage+GIF不在处理gif,而是交给FLAnimatedImage来处理
具体导入直接 pod 'SDWebImage/GIF'即可
FLAnimatedImage源代码

2.YYWebImage

YYWebImage使用起来很简单
pod 'YYWebImage'
在使用界面引入#import "YYWebImage.h"即可

    /*
     //YYWebImage 使用
     YYAnimatedImageView *imageView = (YYAnimatedImageView*)[cell.contentView viewWithTag:1];
     imageView.yy_imageURL = url;
     */

其中还有很多的加载方式和样式,大家有时间可以去尝试.
参考资源: