一、前言
上一章節主要講解了圖片的簡單載入、記憶體/磁碟快取等內容,但目前該框架還不支援GIF圖片的載入。而GIF圖片在我們日常開發中是非常常見的。因此,本章節將著手實現對GIF圖片的載入。
二、載入GIF圖片
1. 載入本地GIF圖片
UIImageView
本身是支援對GIF圖片的載入的,將GIF圖片加入到animationImages
屬性中,並通過startAnimating
和stopAnimating
來啟動/停止動畫。
UIImageView* animatedImageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
animatedImageView.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:@"image1.gif"],
[UIImage imageNamed:@"image2.gif"],
[UIImage imageNamed:@"image3.gif"],
[UIImage imageNamed:@"image4.gif"], nil];
animatedImageView.animationDuration = 1.0f;
animatedImageView.animationRepeatCount = 0;
[animatedImageView startAnimating];
[self.view addSubview: animatedImageView];
複製程式碼
2.載入網路GIF圖片
與本地載入的不同之處在於我們通過網路獲取到的是
NSData
型別,如果只是簡單地通過initImageWithData:
方法轉化為image,那麼往往只能獲取到GIF中的第一張圖片。我們知道GIF圖片其實就是由於多張圖片組合而成。因此,我們這裡最重要是如何從NSData
中解析轉化為images
。
JImageCoder
:我們定義一個類轉化用於影像的解析
@interface JImageCoder : NSObject
+ (instancetype)shareCoder;
- (UIImage *)decodeImageWithData:(NSData *)data;
@end
複製程式碼
我們知道通過網路請求下載之後返回的是NSData
資料
NSURLSessionDataTask *dataTask = [self.session dataTaskWithURL:URL completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
//do something: data->image
}];
複製程式碼
對於PNG和JPEG格式我們可以直接使用initImageWithData
方法來轉化為image
,但對於GIF圖片,我們則需要特殊處理。那麼處理之前,我們就需要根據NSData
來判斷圖片對應的格式。
- 根據
NSData
資料判斷圖片格式:這裡參考了SDWebImage
的實現,根據資料的第一個位元組來判斷。
- (JImageFormat)imageFormatWithData:(NSData *)data {
if (!data) {
return JImageFormatUndefined;
}
uint8_t c;
[data getBytes:&c length:1];
switch (c) {
case 0xFF:
return JImageFormatJPEG;
case 0x89:
return JImageFormatPNG;
case 0x47:
return JImageFormatGIF;
default:
return JImageFormatUndefined;
}
}
複製程式碼
獲取到圖片的格式之後,我們就可以根據不同的格式來分別進行處理
- (UIImage *)decodeImageWithData:(NSData *)data {
JImageFormat format = [self imageFormatWithData:data];
switch (format) {
case JImageFormatJPEG:
case JImageFormatPNG:{
UIImage *image = [[UIImage alloc] initWithData:data];
image.imageFormat = format;
return image;
}
case JImageFormatGIF:
return [self decodeGIFWithData:data];
default:
return nil;
}
}
複製程式碼
針對GIF圖片中的每張圖片的獲取,我們可以使用ImageIO
中的相關方法來提取。要注意的是對於一些物件,使用完之後要及時釋放,否則會造成記憶體洩漏。
- (UIImage *)decodeGIFWithData:(NSData *)data {
CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
if (!source) {
return nil;
}
size_t count = CGImageSourceGetCount(source);
UIImage *animatedImage;
if (count <= 1) {
animatedImage = [[UIImage alloc] initWithData:data];
animatedImage.imageFormat = JImageFormatGIF;
} else {
NSMutableArray<UIImage *> *imageArray = [NSMutableArray array];
for (size_t i = 0; i < count; i ++) {
CGImageRef imageRef = CGImageSourceCreateImageAtIndex(source, i, NULL);
if (!imageRef) {
continue;
}
UIImage *image = [[UIImage alloc] initWithCGImage:imageRef];
[imageArray addObject:image];
CGImageRelease(imageRef);
}
animatedImage = [[UIImage alloc] init];
animatedImage.imageFormat = JImageFormatGIF;
animatedImage.images = [imageArray copy];
}
CFRelease(source);
return animatedImage;
}
複製程式碼
為了使得UIImage
物件可以儲存圖片的格式和GIF中的images
,這裡實現了一個UIImage
的分類
typedef NS_ENUM(NSInteger, JImageFormat) {
JImageFormatUndefined = -1,
JImageFormatJPEG = 0,
JImageFormatPNG = 1,
JImageFormatGIF = 2
};
@interface UIImage (JImageFormat)
@property (nonatomic, assign) JImageFormat imageFormat;
@property (nonatomic, copy) NSArray *images;
@end
@implementation UIImage (JImageFormat)
- (void)setImages:(NSArray *)images {
objc_setAssociatedObject(self, @selector(images), images, OBJC_ASSOCIATION_COPY_NONATOMIC);
}
- (NSArray *)images {
NSArray *images = objc_getAssociatedObject(self, @selector(images));
if ([images isKindOfClass:[NSArray class]]) {
return images;
}
return nil;
}
- (void)setImageFormat:(JImageFormat)imageFormat {
objc_setAssociatedObject(self, @selector(imageFormat), @(imageFormat), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (JImageFormat)imageFormat {
JImageFormat imageFormat = JImageFormatUndefined;
NSNumber *value = objc_getAssociatedObject(self, @selector(imageFormat));
if ([value isKindOfClass:[NSNumber class]]) {
imageFormat = value.integerValue;
return imageFormat;
}
return imageFormat;
}
@end
複製程式碼
使用JImageCoder
將NSData
型別的資料解析為images
之後,便可以像本地載入GIF一樣使用了。
static NSString *gifUrl = @"https://user-gold-cdn.xitu.io/2019/3/27/169bce612ee4dc21";
- (void)downloadImage {
__weak typeof(self) weakSelf = self;
[[JImageDownloader shareInstance] fetchImageWithURL:gifUrl completion:^(UIImage * _Nullable image, NSError * _Nullable error) {
__strong typeof (weakSelf) strongSelf = weakSelf;
if (strongSelf && image) {
if (image.imageFormat == JImageFormatGIF) {
strongSelf.imageView.animationImages = image.images;
[strongSelf.imageView startAnimating];
} else {
strongSelf.imageView.image = image;
}
}
}];
}
複製程式碼
3.實現效果
和YYAnimatedImage
和FLAnimatedImage
分別進行了對比,會發現自定義框架載入的GIF播放會更快些。我們回到UIImageView
的GIF本地載入中,會發現遺漏了兩個重要的屬性:
@property (nonatomic) NSTimeInterval animationDuration; // for one cycle of images. default is number of images * 1/30th of a second (i.e. 30 fps)
@property (nonatomic) NSInteger animationRepeatCount; // 0 means infinite (default is 0)
複製程式碼
animatedDuration
定義了動畫的週期,由於我們沒有給它設定GIF的週期,所以這裡使用的預設週期。接下來我們將回到GIF圖片的解析過程中,增加這兩個相關屬性。
4.GIF的animationDuration
和animationRepeatCount
屬性
animationRepeatCount
:動畫執行的次數
CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
....
NSInteger loopCount = 0;
CFDictionaryRef properties = CGImageSourceCopyProperties(source, NULL);
if (properties) {
CFDictionaryRef gif = CFDictionaryGetValue(properties, kCGImagePropertyGIFDictionary);
if (gif) {
CFTypeRef loop = CFDictionaryGetValue(gif, kCGImagePropertyGIFLoopCount);
if (loop) {
CFNumberGetValue(loop, kCFNumberNSIntegerType, &loopCount);
}
}
CFRelease(properties); //注意使用完需要釋放
}
複製程式碼
animationDuration
:動畫執行週期
我們分別獲取到GIF中每張圖片對應的delayTime(顯示時間),最後求它們的和,便可以作為GIF動畫的一個完整週期。而圖片的delayTime可以通過
ImageSource
中的kCGImagePropertyGIFUnclampedDelayTime
或kCGImagePropertyGIFDelayTime
屬性獲取。
NSTimeInterval duration = 0;
for (size_t i = 0; i < count; i ++) {
CGImageRef imageRef = CGImageSourceCreateImageAtIndex(source, i, NULL);
if (!imageRef) {
continue;
}
....
float delayTime = kJAnimatedImageDefaultDelayTimeInterval;
CFDictionaryRef properties = CGImageSourceCopyPropertiesAtIndex(source, i, NULL);
if (properties) {
CFDictionaryRef gif = CFDictionaryGetValue(properties, kCGImagePropertyGIFDictionary);
if (gif) {
CFTypeRef value = CFDictionaryGetValue(gif, kCGImagePropertyGIFUnclampedDelayTime);
if (!value) {
value = CFDictionaryGetValue(gif, kCGImagePropertyGIFDelayTime);
}
if (value) {
CFNumberGetValue(value, kCFNumberFloatType, &delayTime);
}
}
CFRelease(properties);
}
duration += delayTime;
}
複製程式碼
獲取之後加入到UIImage屬性中:
animatedImage = [[UIImage alloc] init];
animatedImage.imageFormat = JImageFormatGIF;
animatedImage.images = [imageArray copy];
animatedImage.loopCount = loopCount;
animatedImage.totalTimes = duration;
- (void)downloadImage {
__weak typeof(self) weakSelf = self;
[[JImageDownloader shareInstance] fetchImageWithURL:gifUrl completion:^(UIImage * _Nullable image, NSError * _Nullable error) {
__strong typeof (weakSelf) strongSelf = weakSelf;
if (strongSelf && image) {
if (image.imageFormat == JImageFormatGIF) {
strongSelf.imageView.animationImages = image.images;
strongSelf.imageView.animationDuration = image.totalTimes;
strongSelf.imageView.animationRepeatCount = image.loopCount;
[strongSelf.imageView startAnimating];
} else {
strongSelf.imageView.image = image;
}
}
}];
}
複製程式碼
實現效果如下:
發現通過設定動畫週期和次數之後,動畫載入的更快了!!!為了解決這個問題,重新閱讀了YYAnimatedImage
和FLAnimatedImage
的原始碼,發現它們在獲取GIF圖片的delayTime時,都會有一個小小的細節。
FLAnimatedImage.m
const NSTimeInterval kFLAnimatedImageDelayTimeIntervalMinimum = 0.02;
const NSTimeInterval kDelayTimeIntervalDefault = 0.1;
// Support frame delays as low as `kFLAnimatedImageDelayTimeIntervalMinimum`, with anything below being rounded up to `kDelayTimeIntervalDefault` for legacy compatibility.
// To support the minimum even when rounding errors occur, use an epsilon when comparing. We downcast to float because that's what we get for delayTime from ImageIO.
if ([delayTime floatValue] < ((float)kFLAnimatedImageDelayTimeIntervalMinimum - FLT_EPSILON)) {
FLLog(FLLogLevelInfo, @"Rounding frame %zu's `delayTime` from %f up to default %f (minimum supported: %f).", i, [delayTime floatValue], kDelayTimeIntervalDefault, kFLAnimatedImageDelayTimeIntervalMinimum);
delayTime = @(kDelayTimeIntervalDefault);
}
UIImage+YYWebImage.m
static NSTimeInterval _yy_CGImageSourceGetGIFFrameDelayAtIndex(CGImageSourceRef source, size_t index) {
NSTimeInterval delay = 0;
CFDictionaryRef dic = CGImageSourceCopyPropertiesAtIndex(source, index, NULL);
if (dic) {
CFDictionaryRef dicGIF = CFDictionaryGetValue(dic, kCGImagePropertyGIFDictionary);
if (dicGIF) {
NSNumber *num = CFDictionaryGetValue(dicGIF, kCGImagePropertyGIFUnclampedDelayTime);
if (num.doubleValue <= __FLT_EPSILON__) {
num = CFDictionaryGetValue(dicGIF, kCGImagePropertyGIFDelayTime);
}
delay = num.doubleValue;
}
CFRelease(dic);
}
// http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-frame-delay-browser-compatibility
if (delay < 0.02) delay = 0.1;
return delay;
}
複製程式碼
如上所示,YYAnimatedImage
和FLAnimatedImage
對於delayTime小於0.02的情況下,都會設定為預設值0.1。這麼處理的主要目的是為了更好相容更低階的裝置,具體可以檢視這裡。
static const NSTimeInterval kJAnimatedImageDelayTimeIntervalMinimum = 0.02;
static const NSTimeInterval kJAnimatedImageDefaultDelayTimeInterval = 0.1;
float delayTime = kJAnimatedImageDefaultDelayTimeInterval;
CFDictionaryRef properties = CGImageSourceCopyPropertiesAtIndex(source, i, NULL);
if (properties) {
CFDictionaryRef gif = CFDictionaryGetValue(properties, kCGImagePropertyGIFDictionary);
if (gif) {
CFTypeRef value = CFDictionaryGetValue(gif, kCGImagePropertyGIFUnclampedDelayTime);
if (!value) {
value = CFDictionaryGetValue(gif, kCGImagePropertyGIFDelayTime);
}
if (value) {
CFNumberGetValue(value, kCFNumberFloatType, &delayTime);
if (delayTime < ((float)kJAnimatedImageDelayTimeIntervalMinimum - FLT_EPSILON)) {
delayTime = kJAnimatedImageDefaultDelayTimeInterval;
}
}
}
CFRelease(properties);
}
duration += delayTime;
複製程式碼
為了讓動畫效果更接近YYAnimatedImage
和FLAnimatedImage
,我們同樣在獲取delayTime時增加條件判斷。具體效果如下:
三、總結
本小節主要實現了圖片框架對GIF圖片的載入功能。重點主要集中在通過
ImageIO
中的相關方法來獲取到GIF中的每張圖片,以及圖片對應的週期和執行次數等。在最後結尾處也提及到了在獲取圖片delayTime時的一個小細節。通過這個細節也可以體現出自己動手打造框架的好處,因為如果只是簡單地去閱讀相關原始碼,往往很容易忽略很多細節。