SDwebImage YYImage lottie 加载gi
最近项目改版，要加载好几个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 设计思路，实现细节剖析
