從零開始打造一個iOS圖片載入框架（二）

醬了裡個醬發表於2019-03-28

一、前言

上一章節主要講解了圖片的簡單載入、記憶體/磁碟快取等內容，但目前該框架還不支援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時的一個小細節。通過這個細節也可以體現出自己動手打造框架的好處，因為如果只是簡單地去閱讀相關原始碼，往往很容易忽略很多細節。

參考資料

GIF動畫載入框架-FLAnimatedImage解析

從零開始打造一個iOS圖片載入框架（一）
2019-03-26
iOS框架
從零開始打造一個iOS圖片載入框架（三）
2019-04-05
iOS框架
從零開始打造一個iOS圖片載入框架（四）
2019-04-17
iOS框架
從零開始實現一個RPC框架（二）
2019-03-17
RPC框架
從零開始寫JavaScript框架（二）
2013-07-17
JavaScript框架
如何從零開始學習一個框架
2016-10-24
框架
從零開始實現一個RPC框架（零）
2019-03-03
RPC框架
從零開始-打造一個JavaScript完整線上教程文件
2018-11-28
JavaScript
從零開始實現一個RPC框架（一）
2019-03-10
RPC框架
從零開始寫JavaScript框架（一）
2013-04-26
JavaScript框架
如何實現一個圖片載入框架
2019-03-02
框架
從零開始打造自己的PHP框架――第2章
2019-02-16
PHP框架
從零開始做一個SLG遊戲（八）：配置表載入元件
2019-11-01
遊戲元件
從零開始實現一個RPC框架（五）
2019-04-07
RPC框架
從零開始實現一個RPC框架（四）
2019-03-31
RPC框架
從零開始實現一個RPC框架（三）
2019-03-24
RPC框架
從零開始寫一個微前端框架-沙箱篇
2021-08-04
前端框架
從零開始如何打造一個誘人的電商網站
2015-09-06
網站
從零開始：用REACT寫一個格鬥遊戲(二)
2019-02-16
React遊戲
從零開始編寫自己的JavaScript框架（二）
2013-07-10
JavaScript框架
從零開始為 PicGo 開發一個新圖床
2019-04-02
PicGo圖床
從零開始手寫一個微前端框架-渲染篇
2021-08-03
前端框架
從零開始實現一個分散式RPC框架
2022-02-15
分散式RPC框架
Android 框架練成教你打造高效的圖片載入框架
2015-05-25
Android框架
從零開始開發一個 Webpack
2018-07-12
Web
從零開始寫一個Exporter
2019-06-25
Export
【D3.js 入門系列一】從零開始繪製一個柱形圖
2019-03-04
JS
從零開始實現一個IDL+RPC框架
2019-08-15
RPC框架
從零開始實現一個簡易的Java MVC框架
2018-07-04
JavaMVC框架
從零開始仿寫一個抖音App——開始
2018-07-18
APP
從零開始實現一個簡易的Java MVC框架(二)--實現Bean容器
2018-07-04
JavaMVC框架Bean
從零開始用 electron 手擼一個截圖工具
2018-10-08
從零開始生成一個ios react-native專案
2018-03-27
iOSReact
【從零開始擼一個App】PKCE
2020-08-28
APP
從零開始寫一個網頁
2016-11-16
網頁
iOS - 從零開始繪製一個帶動畫的多邊形能力分佈圖
2017-05-23
iOS動畫
從零開始編寫自己的JavaScript框架（一）
2013-07-10
JavaScript框架
從零開始寫一個微前端框架-樣式隔離篇
2021-08-05
前端框架