iOS之加載Gif圖片

Gif圖片是非常常見的圖片格式，尤其是在聊天的過程中，Gif表情使用地很頻繁。但是iOS竟然沒有現成的支持加載和播放Gif的類。

簡單地匯總了一下，大概有以下幾種方法：

一、加載本地Gif文件

1、使用UIWebView

    // 讀取gif圖片數據 
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0,0,200,200)];
    [self.view addSubview:webView];

    NSString *path = [[NSBundle mainBundle] pathForResource:@"001" ofType:@"gif"];
    /*
         NSData *data = [NSData dataWithContentsOfFile:path];
         使用loadData:MIMEType:textEncodingName: 則有警告
         [webView loadData:data MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
     */
    NSURL *url = [NSURL URLWithString:path];
    [webView loadRequest:[NSURLRequest requestWithURL:url]];

但是使用UIWebView的弊端在於，不能設置Gif動畫的播放時間。

2、將Gif拆分成多張圖片，使用UIImageView播放

最好把所需要的Gif圖片打包到Bundle文件內,如下圖所示

Loading.png

- (NSArray *)animationImages
{
    NSFileManager *fielM = [NSFileManager defaultManager];
    NSString *path = [[NSBundle mainBundle] pathForResource:@"Loading" ofType:@"bundle"];
    NSArray *arrays = [fielM contentsOfDirectoryAtPath:path error:nil];
    
    NSMutableArray *imagesArr = [NSMutableArray array];
    for (NSString *name in arrays) {
        UIImage *image = [UIImage imageNamed:[(@"Loading.bundle") stringByAppendingPathComponent:name]];
        if (image) {
            [imagesArr addObject:image];
        }
    }
    return imagesArr;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:frame];
    gifImageView.animationImages = [self animationImages]; //獲取Gif圖片列表
    gifImageView.animationDuration = 5;     //執行一次完整動畫所需的時長
    gifImageView.animationRepeatCount = 0;  //動畫重復次數
    [gifImageView startAnimating];
    [self.view addSubview:gifImageView];
}

3、使用SDWebImage

但是很遺憾，SDWebImage 的 sd_setImageWithURL:placeholderImage:這個方法是不能播放本地Gif的，它只能顯示Gif的第一張圖片而已。So，此方法行不通

    UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:frame];
    [gifImageView sd_setImageWithURL:nil placeholderImage:[UIImage imageNamed:@"gifTest.gif"]];

其實，在SDWebImage這個庫里有一個UIImage+GIF的類別，里面為UIImage擴展了三個方法：

@interface UIImage (GIF)
+ (IImage *)sd_animatedGIFNamed:(NSString *)name;
+ (UIImage *)sd_animatedGIFWithData:(NSData *)data;
- (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size;
@end

大家一看就知道，我們要獲取處理后的Gif圖片，其實只要調用前面兩個中的其中一個方法就行了

注意：第一個只需要傳Gif的名字，而不需要帶擴展名(如Gif圖片名字為[e-mail]，只需傳001即可)

我們就使用第二個方法試一試效果:

    NSString *path = [[NSBundle mainBundle] pathForResource:@"gifTest" ofType:@"gif"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    UIImage *image = [UIImage sd_animatedGIFWithData:data];
    gifImageView.image = image;

然后通過斷點，我們看下獲取到的image是個什么樣的東東：

img.png

我們發現：

image的isa指針指向了_UIAnimatedImage ，說明它是一個叫作_UIAnimatedImage 的類(當然，這個_UIAnimatedImage 蘋果是不會直接讓我們使用的)

_images 表示：這個Gif包含了多少張圖片

_duration表示：執行一次完整動畫所需的時長

其實，動畫執續時間_duration也可以更改！
我們來看下此方法的內部實現：

+ (UIImage *)sd_animatedGIFWithData:(NSData *)data {
    if (!data) {
        return nil;
    }

    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);

    size_t count = CGImageSourceGetCount(source);

    UIImage *animatedImage;

    if (count <= 1) {
        animatedImage = [[UIImage alloc] initWithData:data];
    }
    else {
        NSMutableArray *images = [NSMutableArray array];

        NSTimeInterval duration = 0.0f;

        for (size_t i = 0; i < count; i++) {
            CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);

            duration += [self sd_frameDurationAtIndex:i source:source];

            [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];

            CGImageRelease(image);
        }

        if (!duration) {
            duration = (1.0f / 10.0f) * count;
        }

        animatedImage = [UIImage animatedImageWithImages:images duration:duration];
    }

    CFRelease(source);

    return animatedImage;
}

很明顯，duration是可以隨意更改的，只不過此方法設置了一個默認值
(duration = (1.0f / 10.0f) * count)

歸根到底，創建新的動態的Image其實是調用了系統提供的一個UIImage的類方法而已:

 UIImage *animatedImage = [UIImage animatedImageWithImages:images duration:duration];

 

二、加載網絡Gif文件

加載網絡的Gif文件就簡單多了。最簡單的方法，我們只需要使用SDWebImage 的 sd_setImageWithURL:這個方法傳入Gif文件是url地址即可。
糾其原因：稍微仔細看了SDWebImage內部實現就可以清楚，大概是以下幾個步驟：

1、SDWebImage根據url將Gif文件下載下來，格式為一個NSData
2、如果判斷是Gif格式，則會調用** sd_animatedGIFWithData:** 將Data轉換成我們需要的Gif格式
3、通過上面的方法二即可顯示出Gif圖片

UIImage *image = [UIImage sd_animatedGIFWithData:data];
gifImageView.image = image;

............................................................

總結

一、加載本地Gif文件

1、使用UIWebView不可以設置duration，其他兩種方法都可設置。而且方法1的容器為UIWebView ，其余兩種的容器都是大家熟悉的UIImageView
2、方法2和方法3需要對應看應用場景

如：下拉、上拉加載控件需要一個根據拉動距離設置特定的Image，則需要使用方法2

直接顯示Gif圖片，則使用方法3會更方便

二、加載網絡Gif文件

直接使用SDWebImage 的 sd_setImageWithURL:這個方法傳入Gif文件是url地址即可

............................................................

PS:簡單小Demo

作者：鏡花水月_I
鏈接：http://www.jianshu.com/p/f0530a75c7af
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。