IOS 高效GIF播放

ios通常播放gif的方式由如下幾種：

1.使用webview（用起來不是很方便，又不夠靈活）

2.將GIF圖片分解成多張PNG圖片，使用UIImageView播放（內存消耗過大，一個200多幀率的gif圖片，內存能夠漲上天，頁面上有幾張這樣的圖片，不敢想象）

3.使用SDWebImage（原理與方式2類似，只是上層封裝了一層，方便調用，內存消耗過大）

4.定時刷新imageview.layer（實現循環播放圖片的效果，可以做到釋放迅速，但是加重cpu的負擔）

 

這個是我實現播放GIF圖片imageview的repo：https://github.com/lizilong1989/LongImageCache

我實現的原理很簡單，首先我定義了一個UIImageView+LongCache.h(作為ImageView的擴展，方便不同場景下，是您的ImageView對Gif的支持，同時還支持對網絡圖片的下載)，核心就是將gif圖片的播放放在displaylink中，然后添加到loop中，循環刷新image，到達播放gif圖片的效果。

@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

plagGif方法就是刷新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)];
}

使用了方法替換，將startAnimating和stopAnimating替換成下面的方法，當使用像tableview這樣復用結構時，imageview會根據設置的新數據，停止當前gif的播放，效果就是當滑動到其它位置時，cpu和內存就會降低，不會影響整個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];
    }
}

整體播放效果較為流暢，需要消耗一定的cpu，但是內存消耗明顯較低。

下面是播放相同的GIF圖片，使用iphone8模擬器，對內存和cpu的效果對比

使用SDImageCache播放GIF圖片時的內存和CPU消耗:

 

使用LongImageCache播放GIF圖片時的內存和CPU消耗: