IOS efficient GIF playback and IOSGIF playback

IOS efficient GIF playback and IOSGIF playback

Ios normally plays gif videos in the following ways:

1. Use webview (it is not very convenient to use, but not flexible enough)

2. break down GIF images into multiple PNG images and use UIImageView for playback (memory consumption is too large, a GIF image with a frame rate of more than 200 is capable of increasing memory usage. There are several such images on the page, can't imagine)

3. Use SDWebImage (similar to method 2, but the upper layer encapsulates a layer for convenient calling and excessive memory consumption)

4. Regularly refresh the imageview. layer (to achieve the effect of loop playback, you can release the image quickly, but increase the cpu burden)

 

This is the repo I implemented to play GIF image imageview: https://github.com/lizilong1989/LongImageCache

The implementation principle is very simple. First, I defined a UIImageView + LongCache. h (as an extension of ImageView, it is convenient for your ImageView to support Gif in different scenarios, and also supports downloading network images ), the core is to put the GIF image playing in displaylink, add it to the loop, refresh the image cyclically, and then play the GIF image.

@interface UIImageView (LongCachePrivate)@property (nonatomic, strong) UIActivityIndicatorView *indicatorView;@property (nonatomic, strong) NSData *longGifData;@property (nonatomic, strong) NSNumber *longIndex;@property (nonatomic, strong) NSNumber *timeDuration;@property (nonatomic, strong) NSString *urlKey;@property (nonatomic, strong) CADisplayLink *displayLink;@property (nonatomic, assign) CGImageSourceRef imageSourceRef;- (void)playGif;@end

The plagGif method is to refresh the ImageView,

- (void)playGif{    NSData *gifData = self.longGifData;    if (gifData == nil) {        [self stopAnimating];        return;    }        if (!self.imageSourceRef) {        self.imageSourceRef = CGImageSourceCreateWithData((__bridge CFDataRef)(gifData), NULL);    }        NSUInteger numberOfFrames = CGImageSourceGetCount(self.imageSourceRef);    NSInteger index = self.longIndex.integerValue;    if (index >= numberOfFrames) {        index = 0;    }        NSTimeInterval time = [self.timeDuration doubleValue];    time += self.displayLink.duration;    if (time <= [self _frameDurationAtIndex:index source:self.imageSourceRef]) {        self.timeDuration = @(time);        return;    }    self.timeDuration = 0;        CGImageRef imageRef = CGImageSourceCreateImageAtIndex(self.imageSourceRef, index, NULL);    self.image = [UIImage imageWithCGImage:imageRef];    [self.layer setNeedsDisplay];    CFRelease(imageRef);    [self setLongIndex:@(++index)];}

Replace startAnimating and stopAnimating with the following method. When a structure such as tableview is reused, imageview stops playing the current gif based on the new data, the effect is that when sliding to another position, the cpu and memory will be reduced without affecting the performance of the entire tableview.

- (void)long_startAnimating{    BOOL ret = self.longGifData != nil;        if (ret) {        if (!self.displayLink) {            self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(playGif)];            [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];        }        self.displayLink.paused = NO;    } else {        [self long_startAnimating];    }}- (void)long_stopAnimating{    BOOL ret = self.displayLink != nil;        if (ret) {        self.displayLink.paused = YES;        [self.displayLink invalidate];        self.displayLink = nil;    } else {        [self long_stopAnimating];    }}

The overall playback performance is relatively smooth and requires a certain amount of cpu, but the memory consumption is significantly lower.

The following figure shows how to play the same GIF image. The memory and cpu performance are compared using the iPhone 8 simulator.

Memory and CPU consumption when playing GIF images using SDImageCache:

 

Memory and CPU consumption when using LongImageCache to play GIF images: