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

 

 

猜你喜欢

转载自blog.csdn.net/xuexixiaoshizhe/article/details/84972824
今日推荐