iOS:關(guān)于加載GIF圖片的思考

• 前言
• GIF原理
• 加載方式
• • UIImageView
  • SDWebImage
  • QExtension
  • WKWebView
  • YYImage
• 總結(jié)
• • 素材

前言

最近在項目中需要加入一個動畫效果，設(shè)計師在導(dǎo)出Lottie動畫后發(fā)現(xiàn)并不能達(dá)到效果，就想使用gif圖片來實現(xiàn)。
但是將gif圖片放入項目中運行時發(fā)現(xiàn)了一些問題，所以在這里整理一下有關(guān)加載gif圖片的問題！
以下觀點都是作者個人進(jìn)行了不嚴(yán)謹(jǐn)?shù)暮唵螠y試得出的結(jié)論，如有錯誤請多多包涵，歡迎討論！

GIF原理

GIF的全稱是Graphics Interchange Format，可譯為圖形交換格式，用于以超文本標(biāo)志語言（Hypertext Markup Language）方式顯示索引彩色圖像，在因特網(wǎng)和其他在線服務(wù)系統(tǒng)上得到廣泛應(yīng)用。GIF是一種公用的圖像文件格式標(biāo)準(zhǔn)，版權(quán)歸Compu Serve公司所有。
詳細(xì)去讀GIF百度百科即可，我們不必深究。簡單的將GIF理解為循環(huán)播放的幻燈片（個人見解）。

加載方式

UIImageView

SDWebImage

QExtension

WKWebView

YYImage
就以下5種方式進(jìn)行討論，最終還是選擇了YYImage進(jìn)行實現(xiàn)！具體如下：

UIImageView

系統(tǒng)提供的UIimageView是支持多張圖片的播放的，類似于播放幻燈片，但是這樣就需要先將*.gif*文件先進(jìn)行抽幀為單獨的幀圖片，再進(jìn)行播放，很麻煩！但是實現(xiàn)確實很簡單的，如果只是少數(shù)幾張圖片的切換的話，還是可以選擇的。

#pragma mark - eg UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 400, 300)]; gifImageView.animationImages = @[]; // 存放每一幀的UIImage的數(shù)組 gifImageView.animationDuration = 5; // 執(zhí)行一次完整動畫所需的時長 gifImageView.animationRepeatCount = 1;// 動畫重復(fù)次數(shù) [gifImageView startAnimating]; [self.view addSubView:gifImageView]; #pragma mark - UIImageView Api @property (nonatomic, getter=isHighlighted) BOOL highlighted API_AVAILABLE(ios(3.0)); // default is NO // these allow a set of images to be animated. the array may contain multiple copies of the same @property (nullable, nonatomic, copy) NSArray<UIImage *> *animationImages; // The array must contain UIImages. Setting hides the single image. default is nil @property (nullable, nonatomic, copy) NSArray<UIImage *> *highlightedAnimationImages API_AVAILABLE(ios(3.0)); // The array must contain UIImages. Setting hides the single image. default is nil @property (nonatomic) NSTimeInterval animationDuration; // for one cycle of images. default is number of images * 1/30th of a second (i.e. 30 fps) @property (nonatomic) NSInteger animationRepeatCount; // 0 means infinite (default is 0) // When tintColor is non-nil, any template images set on the image view will be colorized with that color. // The tintColor is inherited through the superview hierarchy. See UIView for more information. @property (null_resettable, nonatomic, strong) UIColor *tintColor API_AVAILABLE(ios(7.0)); - (void)startAnimating; - (void)stopAnimating; @property(nonatomic, readonly, getter=isAnimating) BOOL animating;

SDWebImage

SDWebImage可以說是加載圖片的常用三方庫了，嘗試著使用了一下，但是卻發(fā)現(xiàn)了很嚴(yán)重的內(nèi)存占用問題。加載一次GIF在高幀數(shù)的情況下內(nèi)存直接暴漲了近200M有的100多M，這肯定是不推薦使用了！

#import <SDWebImage/UIImage+GIF.h> #pragma mark - eg // 注意 UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 400, 300)]; NSString *filePath = [[NSBundle bundleWithPath:[[NSBundle mainBundle] bundlePath]] pathForResource:@"test" ofType:@"gif"]; NSData *imageData = [NSData dataWithContentsOfFile:filePath]; gifImageView.image = [UIImage sd_imageWithGIFData:imageData]; [self.view addSubView:gifImageView];

QExtension

QExtension是一個對很多類進(jìn)行了拓展的三方，提供了很多方法，但是只有較少人使用，同樣在使用時發(fā)生了和SDWebImage一樣的內(nèi)存問題，所以并不推薦使用！

#import <QExtension/UIImage+GIF.h> #pragma mark - eg // 注意 UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 400, 300)]; NSString *filePath = [[NSBundle bundleWithPath:[[NSBundle mainBundle] bundlePath]] pathForResource:@"test" ofType:@"gif"]; NSData *imageData = [NSData dataWithContentsOfFile:filePath]; gifImageView.image = [UIImage q_gifImageWithData:imageData]; [self.view addSubView:gifImageView];

WKWebView

系統(tǒng)的WKWebView也是可以對GIF的數(shù)據(jù)進(jìn)行展示的，而且在內(nèi)存方面就友好很多，不會暴漲，我在測試時 漲了7M。使用起來也很簡單，只是少量的需求，且不想引入更多三方的話，可以考慮使用！

#import <WebKit/WebKit.h> #pragma mark - eg WKWebView *gifView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 400, 300)]; NSString *filePath = [[NSBundle bundleWithPath:[[NSBundle mainBundle] bundlePath]] pathForResource:@"test" ofType:@"gif"]; NSData *imageData = [NSData dataWithContentsOfFile:filePath]; [gifView loadData:imageData MIMEType:@"image/gif" characterEncodingName:@"" baseURL:[NSURL URLWithString:@""]]; [self.view addSubView:gifView];

YYImage

YYImage也可以說是很出名的一個三方了，它對UIimageView和UIImage都進(jìn)行了很好的擴(kuò)展，在播放GIF圖片上的優(yōu)化也是做的很好！由于是對UIimageView的擴(kuò)展，它具有所有UIimageView的特性，兼容性很好！我在測試時內(nèi)存漲了6M。

#import <YYImage/YYImage.h> #pragma mark - eg UIImageView *gifImageView = [[YYAnimatedImageView alloc] initWithFrame:CGRectMake(0, 0, 400, 300)]; UIImage *img = [YYImage imageNamed:@"test.gif"]; gifImageView.image = img; [self.view addSubView:gifImageView];

GIF圖片直接放在Bundle里就可以了！

總結(jié)

UIImageView
優(yōu)點：原生
缺點：使用復(fù)雜，無法直接加載.gif文件

SDWebImage
優(yōu)點：使用簡單方便
缺點：需要引入三方、內(nèi)存爆炸！！！

QExtension
優(yōu)點：使用簡單方便
缺點：需要引入三方、不常用、內(nèi)存爆炸！！！

WKWebView
優(yōu)點：原生、使用簡單、兼容性好
缺點：無明顯缺點

YYImage
優(yōu)點：使用簡單、兼容性好
缺點：需要引入三方

素材

總結(jié)

以上是生活随笔為你收集整理的iOS:关于加载GIF图片的思考的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。