开篇语:
一般来说,系统提供的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动起来。