iOS優雅的展示GIF動圖----FLAnimatedImage

開篇語：

一般來說，系統提供的UIImageView已經滿足一般程序中圖片展示的需求，但是，圖片中還有一類特殊的格式gif動圖。它是將多張圖片循環播放，已達到動畫的效果。我們常見的git動圖都是在瀏覽器內展示，效果非常不錯。那APP裏該如何展示gif動圖呢？我們首先來介紹開源庫：FLAnimatedImage

簡單介紹：

整個FLAnimatedImage類庫就四個文件：FLAnimatedImage.h 和.m（繼承自NSObject，負責處理gif數據，類似於UIImage）FLAnimatedImageView.h 和.m（繼承自UIImageView，負責展示gif動圖）。

FLAnimatedImage 涉及到的核心算法包括從NSData中提取每一幀圖片，幀圖片緩存隊列處理。

FLAnimatedImageView則使用CADisplayLink計時器，不停地繪製每一幀圖片。

兩者緊密配合“一邊生產，一邊消費”內存控制的非常棒。

使用篇：

如果只是單純的使用FLAnimatedImage展示一張gif圖的話，非常簡單。官網給出了最簡單的例子：

FLAnimatedImage *image = [FLAnimatedImage animatedImageWithGIFData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"]]];
FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc] init];
imageView.animatedImage = image;
imageView.frame = CGRectMake(0.0, 0.0, 100.0, 100.0);
[self.view addSubview:imageView];

那麼問題來了，這麼簡單的代碼明顯不能應用到項目中。看看大名鼎鼎的SDWebImage是如何與FLAnimatedImage完美合作的。

如果你現在正在使用4.X的SDWebImage版本，那麼你首先應該引用 pod 'SDWebImage/GIF' ，gif模塊並不默認包含在SDWebImage裏面哦！

然後，只需要把你的UIImageView替換成FLAnimatedImageView，即可。其它的功能照舊可以使用。包括異步加載網絡圖片，本地緩存，設置加載動畫，設置佔位圖，回調方法等等。所有的內容你可以在FLAnimatedImageView+WebCache.h中找到。

上代碼：

//初始化
FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc] initWithImage:[UIImage imageNamed:@"demo"]];
imageView.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.clipsToBounds = YES;
[self.contentView addSubview:imageView];

//設置約束
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.offset(4);
    make.left.offset(20);
    make.width.mas_equalTo(140);
    make.height.mas_equalTo(140);;
}];

//加載動畫
[imageView sd_setShowActivityIndicatorView:YES];

//加載網絡地址
[imageView sd_setImageWithURL:[NSURL URLWithString:@"http://demo.gif"] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
    //回調
}];

這樣你就完美的獲得了SDWebImage的所有功能，是不是非常爽！

當然如果你不想把你的UIImageView都替換成FLAnimatedImage，你還可以看看下一篇介紹的內容，直接讓你的UIImage動起來。

iOS優雅的展示GIF動圖2----UIImage