動態圖的分類

• 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()

實際上，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:@"[email protected]"];
}   

使用效果