加載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];
}

效果圖

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

真機效果圖.gif

聲明

在這里說明下，只是簡單的剝離功能，封裝了一下，方便大家使用。

來自：http://www.jianshu.com/p/ed49ff11334d