iOS动态图实现（1）

动态图的分类

• GIF : GIF图形交换格式是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像，诞生在windows1.0的时代，已经有27年的历史，广泛的应用在图像的网络传输中。
• WEBP : 2010年谷歌推出的图片格式，专门用来在web中使用，只有opera和chrome支持。
• APNG : 这东西是mozilla搞出来的，它是24位的，可以容纳1680万种颜色，也是为了取代GIF，目前有火狐和Safari支持。

各种格式的图片大小性能比较可以在 GIF vs APNG vs WEBP 中看到，腾讯的同学也开源了一些工具可以用来转换不同格式的动态图，比如 iSpatra 。

iOS动图的保存

iOS 的相册是支持保存 GIF 和 APNG 动图的，只是不能直接播放。用

[ALAssetsLibrary    writeImageDataToSavedPhotosAlbum:metadata:completionBlock]

可以直接把 APNG、GIF 的数据写入相册。如果图省事直接用 UIImageWriteToSavedPhotosAlbum() 写相册，那么图像会被强制转码为 PNG。

目前来说，保存 UIImage 有三种方式：1.直接用 NSKeyedArchiver 把 UIImage 序列化保存，2.用 UIImagePNGRepresentation() 先把图片转为 PNG 保存，3.用 UIImageJPEGRepresentation() 把图片压缩成 JPEG 保存。

实际上，NSKeyedArchiver 是调用了 UIImagePNGRepresentation 进行序列化的，用它来保存图片是消耗最大的。苹果对 JPEG 有硬编码和硬解码，保存成 JPEG 会大大缩减编码解码时间，也能减小文件体积。所以如果图片不包含透明像素时，UIImageJPEGRepresentation(0.9) 是最佳的图片保存方式，其次是 UIImagePNGRepresentation() 。

GIF动态图的播放

1.使用UIImageView来播放

//创建UIImageView，添加到界面
UIImageView *imageView = [[UIImageView alloc]   initWithFrame:CGRectMake(20, 20, 100, 100)];
[self.view addSubview:imageView];
 //创建一个数组，数组中按顺序添加要播放的图片（图片为静态的图片）
NSMutableArray *imgArray = [NSMutableArray array];
for (int i=1; i<7; i++) {
UIImage *image = [UIImage imageNamed:[NSString  stringWithFormat:@"gif%02d.png",i]];
[imgArray addObject:image];
}
//把存有UIImage的数组赋给动画图片数组
imageView.animationImages = imgArray;
//设置执行一次完整动画的时长
imageView.animationDuration = 6*0.15;
//动画重复次数 （0为重复播放）
imageView.animationRepeatCount = 0;
//开始播放动画
[imageView startAnimating];
//停止播放动画  - (void)stopAnimating;
//判断是否正在执行动画  - (BOOL)isAnimating;

如果图片数量较多的话，会占用很大的内存，每帧的播放时间一样，失去了原有动态图的播放延迟时间

2.用UIWebView来显示动态图

//得到图片的路径
 NSString *path = [[NSBundle mainBundle]    pathForResource:@"happy" ofType:@"gif"];
//将图片转为NSData
NSData *gifData = [NSData dataWithContentsOfFile:path];
//创建一个webView，添加到界面
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 150, 200, 200)];
[self.view addSubview:webView];
//自动调整尺寸
webView.scalesPageToFit = YES;
//禁止滚动
webView.scrollView.scrollEnabled = NO;
//设置透明效果
webView.backgroundColor = [UIColor clearColor];
webView.opaque = 0;
//加载数据
[webView loadData:gifData MIMEType:@"image/gif"     textEncodingName:nil baseURL:nil];

无法控制进度，可控性不强，Web View 没有为在移动设备上播放 GIF 而做优化，经常会降低播放速度。同时也不能很好地控制回放过程或内存占用

3.使用自定义的view来播放动态图

其实使用自定义的view来播放动态图所采取的做法无非是给View加一个image属性，所以决定采用继承UIImageView和UIImage来实现动态图的播放。
动态图控件的优劣主要要考虑一下因素：

1.CPU使用率

2.内存消耗

3.滑动显示的帧率

基于以上影响性能的考虑，决定通过一个可变数组缓存动态图的10帧图像，然后在读取当前帧的图像时，删除数组中缓存的第n帧图像，异步线程加载后面对应的第n+10帧图像，以此来达到减少内存消耗的目的，示例代码如下：

- (UIImage * )getFrameImageAtIndex:(NSUInteger)index
{
    UIImage* frame = nil;
    @synchronized(self.frameImages) {
        frame = self.frameImages[index];
    }
    if (!frame || [frame isKindOfClass:[NSNull class]]) {
        CGImageSourceStatus state = CGImageSourceGetStatus(_imageSource);
        CGImageRef image = CGImageSourceCreateImageAtIndex(_imageSource, index, NULL);
        if (image != NULL) {
            frame = [UIImage imageWithCGImage:image scale:imageScale orientation:UIImageOrientationUp];
            CFRelease(image);
        }
    }

    if (self.frameCount > productLimitNum) {

        [self.frameImages replaceObjectAtIndex:index withObject:[NSNull null]];
        NSUInteger nextReadIdx = (index + productLimitNum);
        nextReadIdx %= self.frameCount;
        if([self.frameImages[nextReadIdx] isKindOfClass:[NSNull class]]) {
            dispatch_async(_serialQueue, ^{
                CGImageSourceStatus state = CGImageSourceGetStatus(_imageSource);
                CGImageRef image = CGImageSourceCreateImageAtIndex(_imageSource, nextReadIdx, NULL);
                @synchronized(self.frameImages) {
                    if (image != NULL) {
                        [self.frameImages replaceObjectAtIndex:nextReadIdx withObject:[UIImage imageWithCGImage:image scale:imageScale orientation:UIImageOrientationUp]];
                    } else {
                        [self.frameImages replaceObjectAtIndex:nextReadIdx withObject:[NSNull null]];
                    }
                    CFRelease(image);
                }
            });
        }
    }
    return frame;
}

通过CADisplayLink来同步的刷新当前UIImageView显示的图像，刷新的频率根据相应的设备而定，一般会在60fps左右，最终达到图像动态播放的目的。

- (CADisplayLink *)displayLink
{
    if (self.superview && self.animatedImage) {
        if (_displayLink) {
            return _displayLink;
        }else{
            _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(changeCurrentFrame:)];
            [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
        }
    } else {
        [_displayLink invalidate];
        _displayLink = nil;
    }
    return _displayLink;
}

- (void)changeCurrentFrame:(CADisplayLink *)displayLink
{
    if (self.currentFrameIndex >= self.animatedImage.frameCount) {
        return;
    }
    self.accumulator += fmin(displayLink.duration, 0.1);

    while (self.accumulator >=  self.animatedImage.frameDurations[self.currentFrameIndex]) {
        self.accumulator -= self.animatedImage.frameDurations[self.currentFrameIndex];
        if (++self.currentFrameIndex >= self.animatedImage.frameCount) {
            if (--self.loopCountdown == 0) {
                [self stopAnimating];
                return;
            }
            self.currentFrameIndex = 0;
        }
        self.currentFrameIndex = MIN(self.currentFrameIndex, [self.animatedImage.images count] - 1);
        self.currentFrame = [self.animatedImage getFrameImageAtIndex:self.currentFrameIndex];
        [self.layer setNeedsDisplay];
    }
}

除了通过CADisplayLink来达成动态图刷新之外还有两种方法也可以达到目的：

• 通过设置动画属性，为layer添CAKeyframeAnimation

  CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
  NSMutableArray *times = [NSMutableArray arrayWithCapacity:3];
  CGFloat currentTime = 0;
  int count = _frameDelayTimes.count;
  for (int i = 0; i < count; ++i) {
      [times addObject:[NSNumber numberWithFloat:(currentTime/_totalTime)]];
      currentTime += [[_frameDelayTimes objectAtIndex:i] floatValue];
  }
  [animation setKeyTimes:times];
  NSMutableArray *images = [NSMutableArray arrayWithCapacity:3];
  for (int i = 0; i < count; ++i) {
      [images addObject:[_frames objectAtIndex:i]];
  }
  [animation setValues:images];
  [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
  animation.duration = _totalTime;
  animation.delegate = self;
  animation.repeatCount = 5;
  
  [self.layer addAnimation:animation forKey:@"gifAnimation"];
  

• 通过NSTimer递归调用，传入每一帧的持续时间

  • scheduledTimerWithTimeInterval:(NSTimeInterval)time invocation:(NSInvocation *)invocation repeats:(BOOL)yesOrNo;

YZImageView和YZImage的使用

#import "ViewController.h"
#import "YZImageView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet YZImageView *test1;
@property (weak, nonatomic) IBOutlet YZImageView *test2;
@property (weak, nonatomic) IBOutlet YZImageView *test3;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    self.test1.animatedImage = (YZAnimationImage *)[YZAnimationImage imageNamed:@"test1"];
    self.test2.animatedImage = (YZAnimationImage *)[YZAnimationImage imageNamed:@"test2"];
    self.test3.animatedImage = (YZAnimationImage *)[YZAnimationImage imageNamed:@"test3@2x"];
}   

使用效果