SDwebImage YYImage lottie 加载gif 动画,性能比较,gif加载框架选型分析

最近项目改版,要加载好几个gif的动画,刚开始尝试使用了SDwebImage来加载显示,可以正常显示,但加载多个gif的时候会被闪退,查找原因是内存爆增引起的。
后来有尝试使用YYkit 框架,来加载gif 动画,YYKit 加载gif 的时候不会引起内存问题,但是CPU的使用率会很高,
最后我使用的是lottie 动画,加载会比较友善,不会存在内存和CPU的问题,
接下来我们依次来分析一下相关的代码

1、SDwebImage

@property (nonatomic, strong) UIImageView  *gifImageview;

self.gifImageview = [[SDAnimatedImageView alloc]init];
    [self.view addSubview:self.gifImageview];
[self.gifImageview mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.mas_equalTo(self.view);
        make.centerY.mas_equalTo(self.view);
        make.height.equalTo(@(200));
    }];

 // 这里我使用的是本地的文件,本gif 内存是1.3M 包含60张图片
NSString *path = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"转场_1"] ofType:@"gif"];
NSData *data = [NSData dataWithContentsOfFile:path];
UIImage *image = [UIImage sd_imageWithGIFData:data];    [self.gifImageview setImage:image];

加载出来通过Xcode 查看,发现Memory 会很高,如下图,这个是单独一个gif,我如果加载3个gif,Memory会爆增到2G


Snip20200820_12.png

1、我们通过sdwebImage 的源码分析一下问题的存在
sd_imageWithGIFData是SDwebImage 的 UIImage+GIF中方法,里面直接调用 [[SDImageGIFCoder sharedCoder] decodedImageWithData:data options:0];,接下来我们直接看一下decodedImageWithData 的源码

#import "SDImageIOAnimatedCoder.h"
- (UIImage *)decodedImageWithData:(NSData *)data options:(nullable SDImageCoderOptions *)options {
//安全判断
    if (!data) {
        return nil;
    }
    CGFloat scale = 1;
    //option 为 nil ,scalefactor  thumbnailSizeValue 暂时无用
    NSNumber *scaleFactor = options[SDImageCoderDecodeScaleFactor];
    if (scaleFactor != nil) {
        scale = MAX([scaleFactor doubleValue], 1);
    }
    
    CGSize thumbnailSize = CGSizeZero;
    //解码缩略图像素大小
    NSValue *thumbnailSizeValue = options[SDImageCoderDecodeThumbnailPixelSize];
    if (thumbnailSizeValue != nil) {
#if SD_MAC
        thumbnailSize = thumbnailSizeValue.sizeValue;
#else
        thumbnailSize = thumbnailSizeValue.CGSizeValue;
#endif
    }
    
    BOOL preserveAspectRatio = YES;
    NSNumber *preserveAspectRatioValue = options[SDImageCoderDecodePreserveAspectRatio];
    if (preserveAspectRatioValue != nil) {
        preserveAspectRatio = preserveAspectRatioValue.boolValue;
    }
    
#if SD_MAC
    // If don't use thumbnail, prefers the built-in generation of frames (GIF/APNG)
    // Which decode frames in time and reduce memory usage
    if (thumbnailSize.width == 0 || thumbnailSize.height == 0) {
        SDAnimatedImageRep *imageRep = [[SDAnimatedImageRep alloc] initWithData:data];
        NSSize size = NSMakeSize(imageRep.pixelsWide / scale, imageRep.pixelsHigh / scale);
        imageRep.size = size;
        NSImage *animatedImage = [[NSImage alloc] initWithSize:size];
        [animatedImage addRepresentation:imageRep];
        return animatedImage;
    }
#endif
    //二进制类型的转换
    //CGImageSourceRef是个什么呢? 我们可以看到这是一个typedef CGImageSource * CGImageSourceRef;
    //这是一个指针,CGImageSource是对图像数据读取任务的抽象,通过它可以获得图像对象、缩略图、图像的属性(包括Exif信息)。
    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
    if (!source) {
        return nil;
    }
    //获取有几张图片
    size_t count = CGImageSourceGetCount(source);
    //返回的动态图片
    UIImage *animatedImage;
    
    BOOL decodeFirstFrame = [options[SDImageCoderDecodeFirstFrameOnly] boolValue];
    if (decodeFirstFrame || count <= 1) {
        animatedImage = [self.class createFrameAtIndex:0 source:source scale:scale preserveAspectRatio:preserveAspectRatio thumbnailSize:thumbnailSize options:nil];
    } else {
    //集合 存放单张的图片
        NSMutableArray<SDImageFrame *> *frames = [NSMutableArray array];
        
        for (size_t i = 0; i < count; i++) {
//            获取gif每一帧图像
            UIImage *image = [self.class createFrameAtIndex:i source:source scale:scale preserveAspectRatio:preserveAspectRatio thumbnailSize:thumbnailSize options:nil];
            if (!image) {
                continue;
            }
            // 获取每一帧图像对应的显示时间
            NSTimeInterval duration = [self.class frameDurationAtIndex:i source:source];
            //创建动图
            SDImageFrame *frame = [SDImageFrame frameWithImage:image duration:duration];
            [frames addObject:frame];
//            作者获取每一帧图像的显示时间的目的仅仅是为了计算gif动画的总时长,并没有给每一帧图像的显示时间分配相应的权重,导致每一帧图像显示的时间为平均时间
        }
        
        NSUInteger loopCount = [self.class imageLoopCountWithSource:source];
        NSLog(@"%lu",(unsigned long)loopCount);
        //把静态的图片转换为动态的image,所以会有大量单张的图片存放在内存中
        animatedImage = [SDImageCoderHelper animatedImageWithFrames:frames];
        animatedImage.sd_imageLoopCount = loopCount;
    }
    animatedImage.sd_imageFormat = self.class.imageFormat;
    //释放图像数据读取任务的抽象对象
    CFRelease(source);
    
    return animatedImage;
}

发现SDWebImage处理gif图片的方法是:将gif资源中每一张imgae写入到内存中,通过animatedImageWithImages的方式播放动画。这样的好处是,gif轮询播放时,直接从内存中取资源就好了,降低了cpu的占用。也就是说,SDWebImage是以空间换取的流畅度。

2 YYKIt

我们来创建 imageView ,展示我们的内容

@property (nonatomic,strong) YYAnimatedImageView *YYImageView;

self.YYImageView = [[YYAnimatedImageView alloc]init];
[self.view addSubview:self.YYImageView];

[self.YYImageView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.left.right.mas_equalTo(self.view);
     make.centerY.mas_equalTo(self.view);
     make.height.equalTo(@(200));
 }];
 
 YYImage *yyimage = [YYImage imageNamed:@"转场_1"];
 [self.YYImageView setImage:yyimage];

YYkit 加载gif 的过程中,memory 基本不会过度使用,但是最初会有一段时间CPU的使用率会很高达到 98 %,


Snip20200820_13.png

    if (!_finalized && index > 0) return NULL;
    if (_frames.count <= index) return NULL;
    _YYImageDecoderFrame *frame = _frames[index];
    
    if (_source) {
        CGImageRef imageRef = CGImageSourceCreateImageAtIndex(_source, index, (CFDictionaryRef)@{(id)kCGImageSourceShouldCache:@(YES)});
        if (imageRef && extendToCanvas) {
            size_t width = CGImageGetWidth(imageRef);
            size_t height = CGImageGetHeight(imageRef);
            if (width == _width && height == _height) {
           // 每次的展示都会调用create 方法 
                CGImageRef imageRefExtended = YYCGImageCreateDecodedCopy(imageRef, YES);
                if (imageRefExtended) {
                    CFRelease(imageRef);
                    imageRef = imageRefExtended;
                    if (decoded) *decoded = YES;
                }
            } else {
                CGContextRef context = CGBitmapContextCreate(NULL, _width, _height, 8, 0, YYCGColorSpaceGetDeviceRGB(), kCGBitmapByteOrder32Host | kCGImageAlphaPremultipliedFirst);
                if (context) {
                    CGContextDrawImage(context, CGRectMake(0, _height - height, width, height), imageRef);
                    CGImageRef imageRefExtended = CGBitmapContextCreateImage(context);
                    CFRelease(context);
                    if (imageRefExtended) {
                        CFRelease(imageRef);
                        imageRef = imageRefExtended;
                        if (decoded) *decoded = YES;
                    }
                }
            }
        }
        return imageRef;
    }
    

发现了YYKit处理gif图片的方法是:每次从缓存的gif中,读取当前需要展示的image,进行动画展示。这样做的好处是,不用为gif的每张image开辟空间了,每次都是从一份gif资源中读取一张image就好了。以一定的帧率从缓冲中解析出当前需要展示的image,肯定是需要耗用cpu的。

3、lottie

我们先来创建一个lottie,lottie 加载gif 动画需要把动画转换成json数据,

@property (nonatomic, strong) LOTAnimationView  *loImageView;

self.loImageView = [LOTAnimationView animationNamed:@"1"];
[self.loImageView play];
self.loImageView.loopAnimation = YES;
[self.view addSubview:self.loImageView];
[self.loImageView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.left.right.mas_equalTo(self.view);
     make.centerY.mas_equalTo(self.view);
     make.height.equalTo(@(200));
}];

 self.loImageView2 = [LOTAnimationView animationNamed:@"2"];
 [self.loImageView2 play];
 [self.view addSubview:self.loImageView2];

通过lottie 加载同样的gif动画看到的CPU 和memory 的数据


Snip20200820_16.png
3-1 接下来我们看一下lottie 的原理,具体使用方法请参考()iOS Lottie动画接入过程详解

1、Lottie是Airbnb开源的一个动画渲染库,支持多平台,包括iOS、Android、React Native以及Flutter(https://github.com/airbnb/lottie-ios)。除了官方支持的平台,更有大神实现了支持Windows、Qt、Skia以及React、Vue、Angular等平台
Lottie动画产生的流程如下:

image

注意点:Lottie 3.0之后已经全部使用swift实现,所以如果需要使用Objective-C版本需要使用Lottie 2.5.3版本

3-2 Lottie 原理

1、需要我们的设计把gif 动画专程json
例如:


Snip20200820_17.png

Lottie整体的原理如下:

1)首先要知道,一个完整动画View,是由很多个子Layer 组成,而每个子Layer主要通过shapes(形状),masks(蒙版),transform三大部分进行动画。
2)Lottie框架通过读取JSON文件,获取到每个子Layer 的shapes,masks,以及出现时间,消失时间以及Transform各个属性的关键帧数组。
3)动画则是通过给CompositionLayer (所有的子layer都添加在这个Layer 上)的 currentFrame属性添加一个CABaseAnimation 来实现。
4)所有的子Layer根据currentFrame 属性的变化,根据JSON中的关键帧数组计算出自己的当前状态并进行显示。

接下来让我们深入它的源码(OC版本)去看看,对它的原理有一个更深刻的认识

1)入口类为LOTAnimationView,提供了一系列加载和设置动画的方法及属性以及对动画的操作,这里列举一二

+ (nonnull instancetype)animationNamed:(nonnull NSString *)animationName NS_SWIFT_NAME(init(name:));
+ (nonnull instancetype)animationFromJSON:(nonnull NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));
+ (nonnull instancetype)animationFromJSON:(nullable NSDictionary *)animationJSON 
inBundle:(nullable NSBundle *)bundle NS_SWIFT_NAME(init(json:bundle:));
...
@property (nonatomic, assign) CGFloat animationProgress;
@property (nonatomic, assign) CGFloat animationSpeed;
...
- (void)play;
- (void)pause; 

LOTAnimationView所有的加载方法,最终执行的都是把JSON字典传到LOTComposition类中,组装LOTComposition对象,当然还会有一些缓存获取,值判断等的逻辑,但是核心就是产生一个LOTComposition对象:

+ (nullable instancetype)animationNamed:(nonnull NSString *)animationName inBundle:(nonnull NSBundle *)bundle {
  ...
  if (JSONObject && !error) {
    LOTComposition *laScene = [[self alloc] initWithJSON:JSONObject withAssetBundle:bundle];
    [[LOTAnimationCache sharedCache] addAnimation:laScene forKey:animationName];
    laScene.cacheKey = animationName;
    return laScene;
  }
  NSLog(@"%s: Animation Not Found", __PRETTY_FUNCTION__);
  return nil;
}

2)LOTComposition类用来解析整个动画的json字典,获取整个动画所需的数据。

- (void)_mapFromJSON:(NSDictionary *)jsonDictionary
     withAssetBundle:(NSBundle *)bundle {
  NSNumber *width = jsonDictionary[@"w"];
  NSNumber *height = jsonDictionary[@"h"];
  if (width && height) {
    CGRect bounds = CGRectMake(0, 0, width.floatValue, height.floatValue);
    _compBounds = bounds;
  }
  
  _startFrame = [jsonDictionary[@"ip"] copy];
  _endFrame = [jsonDictionary[@"op"] copy];
  _framerate = [jsonDictionary[@"fr"] copy];
  
  if (_startFrame && _endFrame && _framerate) {
    NSInteger frameDuration = (_endFrame.integerValue - _startFrame.integerValue) - 1;
    NSTimeInterval timeDuration = frameDuration / _framerate.floatValue;
    _timeDuration = timeDuration;
  }
  
  NSArray *assetArray = jsonDictionary[@"assets"];
  if (assetArray.count) {
    _assetGroup = [[LOTAssetGroup alloc] initWithJSON:assetArray withAssetBundle:bundle withFramerate:_framerate];
  }
  
  NSArray *layersJSON = jsonDictionary[@"layers"];
  if (layersJSON) {
    _layerGroup = [[LOTLayerGroup alloc] initWithLayerJSON:layersJSON
                                            withAssetGroup:_assetGroup
                                             withFramerate:_framerate];
  }
  
  [_assetGroup finalizeInitializationWithFramerate:_framerate];
}

在对JSON字典的解析过程中,会拆分成几种不同的信息,包括:整体关键帧信息、所需图片资源信息、所有子layer的信息。并将图片组和layer组分别传入到LOTAssetGroup和LOTLayerGroup中做进一步处理。

3)LOTLayerGroup类用于解析JSON中“layers”层的数据,并将单独的layer数据传递给LOTLayer处理。核心代码如下:

- (void)_mapFromJSON:(NSArray *)layersJSON
      withAssetGroup:(LOTAssetGroup * _Nullable)assetGroup
       withFramerate:(NSNumber *)framerate {
  
  NSMutableArray *layers = [NSMutableArray array];
  NSMutableDictionary *modelMap = [NSMutableDictionary dictionary];
  NSMutableDictionary *referenceMap = [NSMutableDictionary dictionary];
  
  for (NSDictionary *layerJSON in layersJSON) {
    LOTLayer *layer = [[LOTLayer alloc] initWithJSON:layerJSON
                                      withAssetGroup:assetGroup
                                       withFramerate:framerate];
    [layers addObject:layer];
    modelMap[layer.layerID] = layer;
    if (layer.referenceID) {
      referenceMap[layer.referenceID] = layer;
    }
  }
  
  _referenceIDMap = referenceMap;
  _modelMap = modelMap;
  _layers = layers;
}

4)接下来进入LOTLayer类中,这里最终把json文件中单个layer对应的数据映射出来。

@property (nonatomic, readonly) NSString *layerName;
@property (nonatomic, readonly, nullable) NSString *referenceID;
@property (nonatomic, readonly) NSNumber *layerID;
@property (nonatomic, readonly) LOTLayerType layerType;
@property (nonatomic, readonly, nullable) NSNumber *parentID;
@property (nonatomic, readonly) NSNumber *startFrame;
@property (nonatomic, readonly) NSNumber *inFrame;
@property (nonatomic, readonly) NSNumber *outFrame;
@property (nonatomic, readonly) NSNumber *timeStretch;
@property (nonatomic, readonly) CGRect layerBounds;
@property (nonatomic, readonly, nullable) NSArray<LOTShapeGroup *> *shapes;
@property (nonatomic, readonly, nullable) NSArray<LOTMask *> *masks;

以上属性和json文件对应的key有一一对应关系,比如layerName对应json文件中的nm,layerType对应ty等等,每个layer中包含Layer所需的基本信息,transform变化需要的则是每个LOTKeyframeGroup 类型的属性。这里面包含了该Layer 的 transform变化的关键帧数组,而masks 和 shapes 的信息包含在上面的两个同名数组中。

5)前面四步,已经把动画需要的数据全部准备好了,接下来就需要进行动画显示。
最底层的LOTLayerContainer继承自CALayer,添加了currentFrame属性,LOTCompositionContainer又是继承自LOTLayerContainer,为LOTCompositionContainer对象添加了一个CABaseAnimation动画,然后重写CALayer的display方法,在display方法中通过 CALayer中的presentationLayer获取在动画中变化的currentFrame数值 ,再通过遍历每一个子layer,将更新后的currentFrame传入,来实时更新每一个子Layer的显示。核心代码在LOTLayerContainer中,如下:

- (void)displayWithFrame:(NSNumber *)frame forceUpdate:(BOOL)forceUpdate {
  NSNumber *newFrame = @(frame.floatValue / self.timeStretchFactor.floatValue);
  if (ENABLE_DEBUG_LOGGING) NSLog(@"View %@ Displaying Frame %@, with local time %@", self, frame, newFrame);
  BOOL hidden = NO;
  if (_inFrame && _outFrame) {
    hidden = (frame.floatValue < _inFrame.floatValue ||
              frame.floatValue > _outFrame.floatValue);
  }
  self.hidden = hidden;
  if (hidden) {
    return;
  }
  if (_opacityInterpolator && [_opacityInterpolator hasUpdateForFrame:newFrame]) {
    self.opacity = [_opacityInterpolator floatValueForFrame:newFrame];
  }
  if (_transformInterpolator && [_transformInterpolator hasUpdateForFrame:newFrame]) {
    _wrapperLayer.transform = [_transformInterpolator transformForFrame:newFrame];
  }
  [_contentsGroup updateWithFrame:newFrame withModifierBlock:nil forceLocalUpdate:forceUpdate];
  _maskLayer.currentFrame = newFrame;
}

它实际上完成了以下几件事:
1.根据子Layer的起始帧和结束帧判断当前帧子Layer是否显示
2.更新子Layer当前帧的透明度
3.更新子Layer当前帧的transform
4.更新子Layer中路径和形状等内容的变化

6)上面动画显示的2,3,4步都是通过XXInterpolator这些类,来从当前frame中计算出我们需要的值,我们以LOTTransformInterpolator为例,其他类似,看看它都有些什么:

@property (nonatomic, readonly) LOTPointInterpolator *positionInterpolator;
@property (nonatomic, readonly) LOTPointInterpolator *anchorInterpolator;
@property (nonatomic, readonly) LOTSizeInterpolator *scaleInterpolator;
@property (nonatomic, readonly) LOTNumberInterpolator *rotationInterpolator;
@property (nonatomic, readonly) LOTNumberInterpolator *positionXInterpolator;
@property (nonatomic, readonly) LOTNumberInterpolator *positionYInterpolator;

针对transform变换需要很多的信息,LOTTransformInterpolator中提供了这些所需的信息。

当传入当前frame时,这些interpolator会返回不同的数值,从而组成当前的transform。这些不同的Interpolar会根据自己的算法返回当前所需要的值,但是他们大体的流程都是一样的:

1.在关键帧数组中找到当前frame的前一个关键帧(leadingKeyframe)和后一个关键帧(trailingKeyframe)
2.计算当前frame 在 leadingKeyframe 和 trailingKeyframe 的进度(progress)
3.根据这个progress以及 leadingKeyframe,trailingKeyframe算出当前frame下的值。(不同的Interpolator算法不同)

总结:
Lottie提供了多种便利的方式,供我们加载酷炫的动画,对用户体验有极大的提升。对使用者来说,只需要引入包含动效的json文件和资源文件,调用lottie提供的属性和api完成动画绘制。Lottie内部帮我们做了json文件映射到不同类的不同属性中,通过一系列的计算,确定出每一帧的数据,然后完美的显示在屏幕上,这样的神器,以后要多多用起来啦!


参考文章:Lottie动画使用及原理分析
YYText 源码剖析:CoreText 与异步绘制
YYImage 设计思路,实现细节剖析

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,835评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,900评论 2 383
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,481评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,303评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,375评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,729评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,877评论 3 404
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,633评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,088评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,443评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,563评论 1 339
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,251评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,827评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,712评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,943评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,240评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,435评论 2 348