加载GIF图片优化方案
HZDTammi
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/50e7884d8f867bf17b6ae8e3049d4937.png"></p> <h2>前言</h2> <p>许多项目需要加载GIF图片，但是在直接使用UIImageView加载存在许多问题，于是查找资料做了一个加载GIF的Demo，思路来源 <a href="/misc/goto?guid=4959660098008486997" rel="nofollow,noindex">https://github.com/YouXianMing/Animations</a> 在链接里边，已经给出了解决办法，Demo只是将功能剥离，简单封装了一下。</p> <h2>思路</h2> <p>使用FLAnimatedImage来加载GIF图片，再利用SDWebImage来做缓存，话不多说，直接上代码。</p> <h2>使用方法</h2> <pre> <code class="language-objectivec">导入头文件#import "GIFView.h" 创建GIFView，添加到视图上 GIFView *view = [[GIFView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 300)]; view.url = @"http://upload-images.jianshu.io/upload_images/1979970-9d2b1cc945099612.gif?imageMogr2/auto-orient/strip"; [self.view addSubview:view];</code></pre> <h2>GIFView内部代码</h2> <pre> <code class="language-objectivec">@interface GIFView() /**GIF视图*/ @property (nonatomic,weak)FLAnimatedImageView *gifImageView; @end @implementation GIFView -(instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { [self initUI]; } return self; } - (void)initUI { //创建FLAnimatedImageView,继承自UIView FLAnimatedImageView *gifImageView = [[FLAnimatedImageView alloc] init]; gifImageView.frame = self.frame; [self addSubview:gifImageView]; _gifImageView = gifImageView; } -(void)setUrl:(NSString *)url { _url = url; //将GIF转换成Data NSData *gifImageData = [self imageDataFromDiskCacheWithKey:url]; //沙盒存在，直接加载显示 if (gifImageData) { [self animatedImageView:_gifImageView data:gifImageData]; //沙盒不存在，网络获取 } else { __weak __typeof(self) weakSelf = self; NSURL *newUrl = [NSURL URLWithString:url]; [[SDWebImageDownloader sharedDownloader] downloadImageWithURL:newUrl options:0 progress:nil completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) { [[[SDWebImageManager sharedManager] imageCache] storeImage:image recalculateFromImage:NO imageData:data forKey:newUrl.absoluteString toDisk:YES]; //主线程显示 dispatch_async(dispatch_get_main_queue(), ^{ [weakSelf animatedImageView:_gifImageView data:data]; }); }]; } } //通过数据创建GIF - (void)animatedImageView:(FLAnimatedImageView *)imageView data:(NSData *)data { FLAnimatedImage *gifImage = [FLAnimatedImage animatedImageWithGIFData:data]; imageView.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height); imageView.animatedImage = gifImage; imageView.alpha = 0.f; [UIView animateWithDuration:1.f animations:^{ imageView.alpha = 1.f; }]; } //从沙盒读取 - (NSData *)imageDataFromDiskCacheWithKey:(NSString *)key { NSString *path = [[[SDWebImageManager sharedManager] imageCache] defaultCachePathForKey:key]; return [NSData dataWithContentsOfFile:path]; }</code></pre> <h2>效果图</h2> <p>这里需要注意要用真机测试，模拟器测试会看到卡顿现象</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e11ea947c6832e5c15e6fd66d7bcf828.gif"></p> <p style="text-align:center">真机效果图.gif</p> <h2>声明</h2> <p>在这里说明下，只是简单的剥离功能，封装了一下，方便大家使用。</p> <p> </p> <p>来自：http://www.jianshu.com/p/ed49ff11334d</p> <p> </p>