GIF调研之FLAnimatedImage

总体思路：

FLAnimatedImage就是负责gif数据解析，用imageIO解码，根据gif大小制定缓存策略，异步解码。
FLAnimatedImageView负责数据消费，displaylink播放每一帧图片。
抱怨一句：源码好多字段相近例如cacheFramesForIndex和cacheFrameIndexes等等等，无奈对字段脸盲😂😂。mmp🔪
本文先介绍FLAnimatedImage

---

用法：

用法很简单，拿到gifData初始化成FLAnimatedImage赋值给animatedImage。

let animatedImage = FLAnimatedImage.init(animatedGIFData: data)
self.backGroundImageView.animatedImage = animatedImage

---

FLAnimatedImage

先看下他多如牛毛的属性，否则后面会很蒙。也可以看到后面回来查看

//FLAnimatedImage.h
@property (nonatomic, strong, readonly) UIImage *posterImage; //GIF动画的封面帧图片
@property (nonatomic, assign, readonly) CGSize size; //GIF动画的封面帧图片的尺寸
@property (nonatomic, assign, readonly) NSUInteger loopCount; //GIF动画的循环播放次数,0为无线播放
@property (nonatomic, strong, readonly) NSDictionary *delayTimesForIndexes;  // GIF动画中的每帧图片的显示时间集合
@property (nonatomic, assign, readonly) NSUInteger frameCount; //GIF帧数

@property (nonatomic, assign, readonly) NSUInteger frameCacheSizeCurrent; //当前被缓存的帧图片的总数量
@property (nonatomic, assign) NSUInteger frameCacheSizeMax;  // 允许缓存多少帧图片
//FLAnimatedImage.m
@property (nonatomic, assign, readonly) NSUInteger frameCacheSizeOptimal; //最优缓存尺寸
@property (nonatomic, assign, readonly, getter=isPredrawingEnabled) BOOL predrawingEnabled; // 是否预绘制，提高性能
@property (nonatomic, strong, readonly) NSMutableDictionary *cachedFramesForIndexes;
//保存着缓存帧map{“帧index”：“图片”}
@property (nonatomic, strong, readonly) NSMutableIndexSet *cachedFrameIndexes; // 被缓存了的帧索引例如{@(1)，@(2)}
@property (nonatomic, strong, readonly) NSMutableIndexSet *requestedFrameIndexes; // 被解码了的帧索引集合
@property (nonatomic, strong, readonly) NSIndexSet *allFramesIndexSet;// 所有帧的索引集合，比如有三帧就是@{@（0），@（1），@（2）}

初始化方法：

- (instancetype)initWithAnimatedGIFData:(NSData *)data optimalFrameCacheSize:(NSUInteger)optimalFrameCacheSize predrawingEnabled:(BOOL)isPredrawingEnabled

解释：

• 1 .用ImageIO创建gif图片源CGImageSourceRef，并设置不启用系统缓存。（因为这里要用自己的缓存策略）
• 2 .用ImageIO获取gif图片属性，_loopCount（循环次数，0为无限循环）、imageCount gif包含的帧数。
• 3.解析单张图片，获取帧图片CGImageRef，设置封面帧（gif第一帧），封面帧的尺寸，封面帧的UIImage数据，保存到cachedFramesForIndexes、cachedFrameIndexes属性中。获取单帧图片属性delayTime（延迟时间）保存到属性delayTimesForIndexes中。注意这里只是解码了第一帧图片，其他帧只是获取了图片属性，是为了避免CPU过度消耗。
  注：在取延迟时间的时候有个小细节，尽量去取非减速的时间 kCGImagePropertyGIFUnclampedDelayTime，没有再去取kCGImagePropertyGIFDelayTime。这里原因是由于gif为了得到更快的播放速度回把delay设置的很低，有些浏览器会做降速处理。

• 4.根据gifdata的大小设置缓存机制、属性为frameCacheSizeOptimal，如图。

  
  未命名文件.png

gif核心代码及注释：

// 容错判断
    BOOL hasData = ([data length] > 0);
    if (!hasData) {
        FLLog(FLLogLevelError, @"No animated GIF data supplied.");
        return nil;
    }
    
    self = [super init];
    if (self) {
        //保存原始data数据
        _data = data;
        //是否预绘制，推升性能
        _predrawingEnabled = isPredrawingEnabled;
        
        // 初始化属性的数组
        _cachedFramesForIndexes = [[NSMutableDictionary alloc] init];
        _cachedFrameIndexes = [[NSMutableIndexSet alloc] init];
        _requestedFrameIndexes = [[NSMutableIndexSet alloc] init];

        //创建图片源
        _imageSource = CGImageSourceCreateWithData((__bridge CFDataRef)data,
                                                   (__bridge CFDictionaryRef)@{(NSString *)kCGImageSourceShouldCache: @NO});
        //获取图片源
        if (!_imageSource) {
            FLLog(FLLogLevelError, @"Failed to `CGImageSourceCreateWithData` for animated GIF data %@", data);
            return nil;
        }
        //获取图片类型
        CFStringRef imageSourceContainerType = CGImageSourceGetType(_imageSource);
        BOOL isGIFData = UTTypeConformsTo(imageSourceContainerType, kUTTypeGIF);
        if (!isGIFData) {
            FLLog(FLLogLevelError, @"Supplied data is of type %@ and doesn't seem to be GIF data %@", imageSourceContainerType, data);
            return nil;
        }
        
        // 获取循环次数
        // Note: 0 表示动画无线重复
        // 图片属性字典示例:
        // {
        //     FileSize = 314446;
        //     "{GIF}" = {
        //         HasGlobalColorMap = 1;
        //         LoopCount = 0;
        //     };
        // }
        //获取图片属性字典
        NSDictionary *imageProperties = (__bridge_transfer NSDictionary *)CGImageSourceCopyProperties(_imageSource, NULL);
        //获取循环次数
        _loopCount = [[[imageProperties objectForKey:(id)kCGImagePropertyGIFDictionary] objectForKey:(id)kCGImagePropertyGIFLoopCount] unsignedIntegerValue];
        // 遍历图像帧
        size_t imageCount = CGImageSourceGetCount(_imageSource);
        NSUInteger skippedFrameCount = 0;
        //创建字典保存单帧图片延迟数据
        NSMutableDictionary *delayTimesForIndexesMutable = [NSMutableDictionary dictionaryWithCapacity:imageCount];
        for (size_t i = 0; i < imageCount; i++) {
            @autoreleasepool {
                //获取每一帧图片
                CGImageRef frameImageRef = CGImageSourceCreateImageAtIndex(_imageSource, i, NULL);
                if (frameImageRef) {
                    //转成UIImage
                    UIImage *frameImage = [UIImage imageWithCGImage:frameImageRef];
                    // Check for valid `frameImage` before parsing its properties as frames can be corrupted (and `frameImage` even `nil` when `frameImageRef` was valid).
                    if (frameImage) {
                        // 设置封面图片
                        if (!self.posterImage) {
                            //保存封面第一帧图片及尺寸
                            _posterImage = frameImage;
                            _size = _posterImage.size;
                            //记住封面索引的位置
                            _posterImageFrameIndex = I;
                            //保存到内存缓存中
                            [self.cachedFramesForIndexes setObject:self.posterImage forKey:@(self.posterImageFrameIndex)];
                            
                            [self.cachedFrameIndexes addIndex:self.posterImageFrameIndex];
                        }
                        
                        // 获取延迟时间
                        // Note: 这里是以秒为单位的‘kcfnumberfloat32类型’
                        // frame属性示例、注意这里指的是单张图片:
                        // {
                        //     ColorModel = RGB;
                        //     Depth = 8;
                        //     PixelHeight = 960;
                        //     PixelWidth = 640;
                        //     "{GIF}" = {
                        //         DelayTime = "0.4";
                        //         UnclampedDelayTime = "0.4";
                        //     };
                        // }
                        
                        NSDictionary *frameProperties = (__bridge_transfer NSDictionary *)CGImageSourceCopyPropertiesAtIndex(_imageSource, i, NULL);
                        //取出单张图片数据
                        NSDictionary *framePropertiesGIF = [frameProperties objectForKey:(id)kCGImagePropertyGIFDictionary];
                        
                        // 尽量去取非减速的时间kCGImagePropertyGIFUnclampedDelayTime没有再取kCGImagePropertyGIFDelayTime。这里原因是由于gif为了得到更快的播放速度回把delay设置的很低，有些浏览器会做降速处理。
                        NSNumber *delayTime = [framePropertiesGIF objectForKey:(id)kCGImagePropertyGIFUnclampedDelayTime];
                        if (!delayTime) {
                            delayTime = [framePropertiesGIF objectForKey:(id)kCGImagePropertyGIFDelayTime];
                        }
                        // 如果我们没有从属性中获取到延迟时间，就取kDelayTimeIntervalDefault或者将第一帧的值保留下来
                        const NSTimeInterval kDelayTimeIntervalDefault = 0.1;
                        if (!delayTime) {
                            if (i == 0) {
                                FLLog(FLLogLevelInfo, @"Falling back to default delay time for first frame %@ because none found in GIF properties %@", frameImage, frameProperties);
                                delayTime = @(kDelayTimeIntervalDefault);
                            } else {
                                FLLog(FLLogLevelInfo, @"Falling back to preceding delay time for frame %zu %@ because none found in GIF properties %@", i, frameImage, frameProperties);
                                delayTime = delayTimesForIndexesMutable[@(i - 1)];
                            }
                        }
                        // 如果delayTime小于kFLAnimatedImageDelayTimeIntervalMinimum，那么都应设置成kDelayTimeIntervalDefault默认值,这点应该是RFC规定的是不能少于40ms吧。
                        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);
                        }
                        //保存到数组中
                        delayTimesForIndexesMutable[@(i)] = delayTime;
                    } else {
                        skippedFrameCount++;
                        FLLog(FLLogLevelInfo, @"Dropping frame %zu because valid `CGImageRef` %@ did result in `nil`-`UIImage`.", i, frameImageRef);
                    }
                    CFRelease(frameImageRef);
                } else {
                    skippedFrameCount++;
                    FLLog(FLLogLevelInfo, @"Dropping frame %zu because failed to `CGImageSourceCreateImageAtIndex` with image source %@", i, _imageSource);
                }
            }
        }
        //作为属性存储单帧延迟数据
        _delayTimesForIndexes = [delayTimesForIndexesMutable copy];
        //存储帧数
        _frameCount = imageCount;
        
        if (self.frameCount == 0) {
            FLLog(FLLogLevelInfo, @"Failed to create any valid frames for GIF with properties %@", imageProperties);
            return nil;
        } else if (self.frameCount == 1) {
            FLLog(FLLogLevelInfo, @"Created valid GIF but with only a single frame. Image properties: %@", imageProperties);
        } else {
        }

缓存策略：

//如果没有提供默认值，则根据gif选择默认值
        if (optimalFrameCacheSize == 0) {
            // 计算最优帧缓存大小：试着根据预测的图像尺寸去选择一个较大的缓冲区窗口
            // 这只依赖于图像的大小和帧数
            //  获取gif大小（M），这里用每行的字节数*高度*图片数量/1M的字节
            CGFloat animatedImageDataSize = CGImageGetBytesPerRow(self.posterImage.CGImage) * self.size.height * (self.frameCount - skippedFrameCount) / MEGABYTE;
            //根据gif大小判断缓存策略：
            if (animatedImageDataSize <= FLAnimatedImageDataSizeCategoryAll) {
                //如果小于10M，所有帧都可以缓存
                _frameCacheSizeOptimal = self.frameCount;
            } else if (animatedImageDataSize <= FLAnimatedImageDataSizeCategoryDefault) {
                //小于75M
                //这个值并不依赖于设备内存，因为如果我们不包吃
                // This value doesn't depend on device memory much because if we're not keeping all frames in memory we will always be decoding 1 frame up ahead per 1 frame that gets played and at this point we might as well just keep a small buffer just large enough to keep from running out of frames.
                _frameCacheSizeOptimal = FLAnimatedImageFrameCacheSizeDefault;
            } else {
                // 更大
                //预计的大小超过了建立缓存的限制，进入时就设置成低内存模式
                _frameCacheSizeOptimal = FLAnimatedImageFrameCacheSizeLowMemory;
            }
        } else {
            // 用提供的缓存模式
            _frameCacheSizeOptimal = optimalFrameCacheSize;
        }
        // 无论如何，在帧数上限制最佳的缓存大小
        _frameCacheSizeOptimal = MIN(_frameCacheSizeOptimal, self.frameCount);

取gif对应的帧数

- (UIImage *)imageLazilyCachedAtIndex:(NSUInteger)index

• 1.查看是否所有帧都缓存了，如果有的话直接cachedFramesForIndexes中取图片

• 2.如果没有，保存当前需要解码的帧索引，根据初始化方法确认的缓存策略找到需要缓存的索引集合，这里对需要缓存的定义为从当前解码帧开始往后查5位，知道末尾帧。举个栗子，

  
  未命名文件-2.png
• 3.从结合中排除cachedFrameIndexes（已缓存的帧数结合）、requestedFrameIndexes（已解码的帧数集合）、posterImageFrameIndex（封面帧的位置）、因为这些都是已经解码过的帧索引。
• 4.拿着索引集合去解码吧，从gif图片源（初始化的时候保存的）中解码对应索引的帧，并保存到cachedFramesForIndexes（缓存数据dic）、cachedFrameIndexes（缓存帧索引集）中。
• 5.最后调用purgeFrameCacheIfNeeded方法根据策略清楚缓存，这时候缓存策略字段frameCacheSizeOptimal（最优缓存帧数）的意义就体现出来了，cachedFramesForIndexes（缓存数据dic）、cachedFrameIndexes（缓存帧索引集）的count不会超过frameCacheSizeOptimal。
  源码如下：

- (UIImage *)imageLazilyCachedAtIndex:(NSUInteger)index
{
    // Early return if the requested index is beyond bounds.
    // Note: We're comparing an index with a count and need to bail on greater than or equal to.
    if (index >= self.frameCount) {
        FLLog(FLLogLevelWarn, @"Skipping requested frame %lu beyond bounds (total frame count: %lu) for animated image: %@", (unsigned long)index, (unsigned long)self.frameCount, self);
        return nil;
    }
    
    // Remember requested frame index, this influences what we should cache next.
    self.requestedFrameIndex = index;
#if defined(DEBUG) && DEBUG
    if ([self.debug_delegate respondsToSelector:@selector(debug_animatedImage:didRequestCachedFrame:)]) {
        [self.debug_delegate debug_animatedImage:self didRequestCachedFrame:index];
    }
#endif
    // 如果缓存的图片小于总图片数
    if ([self.cachedFrameIndexes count] < self.frameCount) {
        //找到需要缓存的索引集合
        NSMutableIndexSet *frameIndexesToAddToCacheMutable = [self frameIndexesToCache];
        //除去已经缓存下来的帧图片索引
        [frameIndexesToAddToCacheMutable removeIndexes:self.cachedFrameIndexes];
        [frameIndexesToAddToCacheMutable removeIndexes:self.requestedFrameIndexes];
        [frameIndexesToAddToCacheMutable removeIndex:self.posterImageFrameIndex];
        NSIndexSet *frameIndexesToAddToCache = [frameIndexesToAddToCacheMutable copy];
        
        // Asynchronously add frames to our cache.
        if ([frameIndexesToAddToCache count] > 0) {
            //6、生产帧图片
            [self addFrameIndexesToCache:frameIndexesToAddToCache];
        }
    }
    
    // 得到关键帧图片
    UIImage *image = self.cachedFramesForIndexes[@(index)];
    
    // 根据策略清楚缓存
    [self purgeFrameCacheIfNeeded];
    
    return image;
}

总结：其实FLAnimatedImage的好处就在于会可以根据内存占用的大小，动态改变内存缓存策略，在gif过大的情况下，可以牺牲cpu性能来保证内存的低占用率。

如有问题，欢迎指教呀！