現(xiàn)在的APP不單單是講究功能實(shí)在,還是得看顏值.
下面記錄一下我最近在做一個(gè)顯示GIF的功能列表的時(shí)候,遇到了一些小坑.
測(cè)試demo
主要用到的技術(shù):
- SDWebImage
- AssetsLibrary.framework(系統(tǒng)自帶的第三方類(lèi)庫(kù))
- YYWebImage
我們做iOS開(kāi)發(fā)的,一般遇到加載圖片,都會(huì)想到SDWebImage這個(gè)第三方類(lèi)庫(kù),然而這個(gè)第三方類(lèi)庫(kù)我在實(shí)現(xiàn)對(duì)應(yīng)的代碼邏輯的時(shí)候,發(fā)現(xiàn)并不是很好處理網(wǎng)絡(luò)加載URLgif圖片格式.
1.SDWebImage
- 傳統(tǒng)的加載
//傳統(tǒng)意義的加載
[imgView sd_setImageWithURL:url placeholderImage:nil completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
imgView.image = image;
}];
- 加載本地
//1. 加載本地的gif圖片
FLAnimatedImageView *imgView = (FLAnimatedImageView*)[cell.contentView viewWithTag:1];
imgView.contentMode = UIViewContentModeScaleAspectFit;
NSString * bundlePath = [[ NSBundle mainBundle] pathForResource: @ "gifBundle" ofType :@ "bundle"];
NSString *imgPath= [bundlePath stringByAppendingPathComponent :[NSString stringWithFormat:@"/%ld.gif", indexPath.row+1]];
NSData *imageData = [NSData dataWithContentsOfFile:imgPath];
imgView.animatedImage = [FLAnimatedImage animatedImageWithGIFData:imageData];
在調(diào)試的時(shí)候,發(fā)行加載本地的沒(méi)有問(wèn)題,也沒(méi)有重用的現(xiàn)象出現(xiàn),也沒(méi)有卡頓.所以我們就打算采用這個(gè)加載網(wǎng)絡(luò)URL的GIF圖片.
- 加載url的gif
//2. 加載url gif 圖片 (需要在故事板設(shè)置imageview的類(lèi)型為FLAnimatedImageView)
FLAnimatedImageView *imageView = (FLAnimatedImageView*)[cell.contentView viewWithTag:1];
NSDictionary *dic = listArray[indexPath.row];
NSURL *url = [NSURL URLWithString:[dic valueForKey:@"GIFImageURL"]];
imageView.image = [UIImage imageNamed:@"專(zhuān)注.jpg"];
[self loadAnimatedImageWithURL:url completion:^(FLAnimatedImage *animatedImage) {
imageView.animatedImage = animatedImage;
}];
異步加載
- (void)loadAnimatedImageWithURL:(NSURL *const)url completion:(void (^)(FLAnimatedImage *animatedImage))completion
{
NSString *const filename = url.lastPathComponent;
NSString *const diskPath = [NSHomeDirectory() stringByAppendingPathComponent:filename];
NSData * __block animatedImageData = [[NSFileManager defaultManager] contentsAtPath:diskPath];
FLAnimatedImage * __block animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:nil];
if (animatedImage) {
if (completion) {
completion(animatedImage);
}
} else {
[[[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
animatedImageData = data;
animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:animatedImageData];
if (animatedImage) {
if (completion) {
dispatch_async(dispatch_get_main_queue(), ^{
completion(animatedImage);
});
}
[data writeToFile:diskPath atomically:YES];
}
}] resume];
}
}
我們發(fā)現(xiàn),按照他們的使用方法來(lái)實(shí)現(xiàn)的時(shí)候,發(fā)行出現(xiàn)稍微卡頓和重用的bug.但是我們還沒(méi)放棄,我們想按照加載本地的方法來(lái)加載試試.
這個(gè)時(shí)候引入類(lèi)庫(kù):AssetsLibrary
FLAnimatedImageView *imgView = (FLAnimatedImageView*)[cell.contentView viewWithTag:1];
imgView.contentMode = UIViewContentModeScaleAspectFit;
ALAssetsLibrary *assetLibrary = [[ALAssetsLibrary alloc] init];
void (^ALAssetsLibraryAssetForURLResultBlock)(ALAsset *) = ^(ALAsset *asset) {
if (asset != nil) {
ALAssetRepresentation *rep = [asset defaultRepresentation];
Byte *imageBuffer = (Byte*)malloc(rep.size);
NSUInteger bufferSize = [rep getBytes:imageBuffer fromOffset:0.0 length:rep.size error:nil];
NSData *imageData = [NSData dataWithBytesNoCopy:imageBuffer length:bufferSize freeWhenDone:YES];
FLAnimatedImage *i = [FLAnimatedImage animatedImageWithGIFData:imageData];
imgView.animatedImage = i;
}
else {
}
};
[assetLibrary assetForURL:url
resultBlock:ALAssetsLibraryAssetForURLResultBlock
failureBlock:^(NSError *error) {
}];
*/
結(jié)果發(fā)現(xiàn)可以加載出來(lái),但是GIF圖片不動(dòng)!!
所以我們上網(wǎng)查找了相關(guān)資料,發(fā)行了使用YYWebImage效果更好,更加容易實(shí)現(xiàn).
PS:為什么使用FLAnimatedImageView,是因?yàn)镾DWebImage之前的UIImage+GIF不在處理gif,而是交給FLAnimatedImage來(lái)處理
具體導(dǎo)入直接 pod 'SDWebImage/GIF'即可
FLAnimatedImage源代碼
2.YYWebImage
YYWebImage使用起來(lái)很簡(jiǎn)單
pod 'YYWebImage'
在使用界面引入#import "YYWebImage.h"即可
/*
//YYWebImage 使用
YYAnimatedImageView *imageView = (YYAnimatedImageView*)[cell.contentView viewWithTag:1];
imageView.yy_imageURL = url;
*/
其中還有很多的加載方式和樣式,大家有時(shí)間可以去嘗試.
參考資源:
