iOS加载GIF图

1.WebView

UIWebView
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0,0,200,200)];
[self.view addSubview:webView]; 
NSString *path = [[NSBundle mainBundle] pathForResource:@"1" ofType:@"gif"];
NSURL *url = [NSURL URLWithString:path]; // 可以直接是网络URL
[webView loadRequest:[NSURLRequest requestWithURL:url]];
UIWebView实现代码截图
WKWebView

WKWebView实习和UIWebView一样,也是将GIF图片的URL加载出来

WKWebView代码实现

如果 [[NSBundle mainBundle] pathForResource:@"" ofType:@""] 无法获取到文件
将一个文件导入到工程中后,用[[NSBundle mainBundle] pathForResource:@"" ofType:@""]来获取到该文件时,一直无法拿到这个文件,解决方法如下

在Build Phases -> Copy Bundle Resources下点击加号(+)

2.SDWebImage

4.0.0以前

SDWebImage 提供了一个分类 'UIImage+GIF' 来实现加载GIF图
不能直接使用sd_setImageWithURL:placeholderImage . 这个方法是不能播放本地Gif的,它只能显示Gif的第一张图片而已。

UIImage+GIF.h

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

本地GIF图代码实现

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

网络GIF图 代码实现

NSURL *url = [NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503467551868&di=f53202da5f5fbd6799c38da661d35ec6&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F160622%2F2-1606221R445U9.gif"];
SDWebImageDownloader *downloader = [SDWebImageDownloader sharedDownloader];
[downloader downloadImageWithURL:url options:0 progress:^(NSInteger receivedSize, NSInteger               
        expectedSize, NSURL * _Nullable targetURL) {
        //下载进度
} completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error,
        BOOL finished) {
        UIImage *gifimage = [UIImage sd_animatedGIFWithData:data];
        self.imageView.image = gifimage;
}];
4.0.0以上

SDWebImage 在4.0版本 更改加载GIF图片的使用方法,修改了 UIImage+'GIF' 分类
将原有的三个方法删除掉两个, sd_animatedGIFWithData 也不能实现加载出GIF图片了,
新加方法 isGIF 判断图片是否是GIF图 (原理:判断UIImage的images参数是否为空)
UIImage+GIF.h

/**
 *  Compatibility method - creates an animated UIImage from an NSData, it will only contain the 1st frame image
* 翻译: 兼容性方法 - 从NSData创建动画UIImage,它只包含第一帧图像
 */
+ (UIImage *)sd_animatedGIFWithData:(NSData *)data;

/**
 *  Checks if an UIImage instance is a GIF. Will use the `images` array
* 翻译: 检查UIImage实例是否是GIF。 将使用`images`数组
 */
- (BOOL)isGIF;

从4.0版本开始 推出了 FLAnimatedImage 来实现加载GIF图
如果您使用Cocapods,请将 pod'SDWebImage / GIF' 添加到您的podfile中。
要使用它,只需确保使用FLAnimatedImageView而不是UIImageView。
注意:有一个向后兼容的功能,所以如果您仍然尝试将GIF加载到UIImageView中,它将仅将第一帧显示为静态图像。 详见:SDwebImage

FLAnimatedImage 使用

import <FLAnimatedImageView+WebCache.h>

FLAnimatedImageView 加载本地GIF图

FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
imageView.center = self.view.center;
[self.view addSubview:imageView];
NSString *path = [[NSBundle mainBundle] pathForResource:@"1" ofType:@"gif"];
NSData *data = [NSData dataWithContentsOfFile:path];
imageView.animatedImage = [FLAnimatedImage animatedImageWithGIFData:data];

加载网络GIF图

FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
imageView.center = self.view.center;
[self.view addSubview:imageView];
NSURL *url = [NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503467551868&di=f53202da5f5fbd6799c38da661d35ec6&imgtype=0&src=http%3A%2F%2Fscimg.jb51.net%2Fallimg%2F160622%2F2-1606221R445U9.gif"];
[imageView sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:@"test"]];

其中 animatedImage 是 FLAnimatedImage 的实例对象
导入 <FLAnimatedImageView+WebCache.h> 后 FLAnimatedImageView 加载URL GIF图片 与UIImageView加载URL图片并无太大区别

优缺点:

SDWebImage

容器都是大家熟悉的UIImageView,方便操作,还可以设置ContentModel
4.0以前还能是设置GIF图的duration (进入.m 找到关键字修改值即可)
4.0以后: 推出 FLAnimatedImage 类,拥有了更多的属性

4.0以前sd_animatedGIFWithData中duration的设定,这里是一个默认值,有需要可以修改
FLAnimatedImage.h 部分截图
webView

不能设置duration,也无法获取GIF图片的参数
容器为不常用的UIWebView 或者 WKWebView
无法更改图片的显示样式,只能改变控件的大小
方便快捷,不需要依赖第三方

建议:
有gif图,能给一个App添彩不少,但是我到目前为止还没有发现哪一个App中有大量的gif图展示的,一般项目中不会有大量的gif图存在(一些主要目的就是展示gif图的App除外),我自己的项目中也只是个别地方用到, GIF图一旦过多,肯定是影响性能的
简单快捷时 可以是使用webview ,需要操作GIF图时
建议使用 SDWebImage, 毕竟是一个大多数项目都依赖的第三方库
UITablView 建议使用 SDWebImage

结尾:

加载GIF图还有很多种方式,
例如直接使用原生框架<ImageIO>来实现, 太过复杂
CADisplayLink / CAKeyframeAnimation 都能实现,就是太过于麻烦
GIF图拆分 使用序列帧也可以 太过于耗性能
如果大家项目中需要用到序列帧来实现加载动画 建议使用:lottie-ios

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容