加載GIF圖片優化方案

前言

許多項目須要加載GIF圖片，可是在直接使用UIImageView加載存在許多問題，因而查找資料作了一個加載GIF的Demo，思路來源https://github.com/YouXianMing/Animations 在連接裏邊，已經給出瞭解決辦法，Demo只是將功能剝離，簡單封裝了一下。

思路

使用FLAnimatedImage來加載GIF圖片，再利用SDWebImage來作緩存，話很少說，直接上代碼。

使用方法

導入頭文件#import "GIFView.h" 

建立GIFView，添加到視圖上
GIFView *view = [[GIFView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 300)];
view.url = @"http://upload-images.jianshu.io/upload_images/1979970-9d2b1cc945099612.gif?imageMogr2/auto-orient/strip";
[self.view addSubview:view];
複製代碼

GIFView內部代碼

@interface GIFView()
/**GIF視圖*/
@property (nonatomic,weak)FLAnimatedImageView *gifImageView;

@end

@implementation GIFView

-(instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        [self initUI];
    }
    return self;
}

- (void)initUI
{
    //建立FLAnimatedImageView,繼承自UIView
    FLAnimatedImageView *gifImageView = [[FLAnimatedImageView alloc] init];
    gifImageView.frame                = self.frame;
    [self addSubview:gifImageView];
    _gifImageView = gifImageView;
}

-(void)setUrl:(NSString *)url
{
    _url = url;
    //將GIF轉換成Data
    NSData   *gifImageData             = [self imageDataFromDiskCacheWithKey:url];
    //沙盒存在，直接加載顯示
    if (gifImageData)
    {
        [self animatedImageView:_gifImageView data:gifImageData];
        //沙盒不存在，網絡獲取
    } else
    {
        __weak __typeof(self) weakSelf = self;
        NSURL *newUrl = [NSURL URLWithString:url];
        [[SDWebImageDownloader sharedDownloader] downloadImageWithURL:newUrl
                                                              options:0
                                                             progress:nil
                                                            completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
                                                                
                                                                [[[SDWebImageManager sharedManager] imageCache] storeImage:image
                                                                                                      recalculateFromImage:NO
                                                                                                                 imageData:data
                                                                                                                    forKey:newUrl.absoluteString
                                                                                                                    toDisk:YES];
                                                                //主線程顯示
                                                                dispatch_async(dispatch_get_main_queue(), ^{
                                                                    [weakSelf animatedImageView:_gifImageView data:data];
                                                                });
                                                            }];
    }
}
//經過數據建立GIF
- (void)animatedImageView:(FLAnimatedImageView *)imageView data:(NSData *)data
{
    FLAnimatedImage *gifImage = [FLAnimatedImage animatedImageWithGIFData:data];
    imageView.frame           = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    imageView.animatedImage   = gifImage;
    imageView.alpha           = 0.f;
    
    [UIView animateWithDuration:1.f animations:^{
        imageView.alpha = 1.f;
    }];
}

//從沙盒讀取
- (NSData *)imageDataFromDiskCacheWithKey:(NSString *)key
{
    NSString *path = [[[SDWebImageManager sharedManager] imageCache] defaultCachePathForKey:key];
    return [NSData dataWithContentsOfFile:path];
}
複製代碼

效果圖

這裏須要注意要用真機測試，模擬器測試會看到卡頓現象

聲明

在這裏說明下，只是簡單的剝離功能，封裝了一下，方便你們使用。Demo地址在這裏GIFDemo