iOS播放動態GIF圖片

　

 《轉》

 

　圖片分為靜態和動態兩種，圖片的格式有很多種，在開發中比較常見的是.png和.jpg的靜態圖片，但有的時候在App中需要播放動態圖片，比如.gif格式的小表情頭像，在IOS中並沒有提供直接顯示動態圖片的控件，下面就介紹幾種顯示動態圖片的方式。

 

 

　　<一>  UIImageView用來顯示圖片， 使用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:@"clock%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;

　　<二>  用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];

　　<三>  用第三方GifView顯示本地圖片

　　GifView是封裝好的一個類，可以直接導入程序中，然后創建對象，來顯示動態圖片；需要注意的是，GifView是MRC的，因此在ARC工程中使用它，需要修改標記 –fno-objc-arc

//方式一：顯示本地Gif圖片
    //將圖片轉為NSData數據
    NSData *localData = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"bird" ofType:@"gif"]];
    //創建一個第三方的View顯示圖片
    GifView *dataView = [[GifView alloc] initWithFrame:CGRectMake(0, 300, 200, 100) data:localData];
    [self.view addSubview:dataView];

//方式二：顯示本地Gif圖片
    //得到圖片的路徑
NSString *path = [[NSBundle mainBundle] pathForResource:@"cat" ofType:@"gif"];
//創建一個第三方的View顯示圖片
    GifView *dataView2 = [[GifView alloc] initWithFrame:CGRectMake(200, 300, 150, 100) filePath:path];
    [self.view addSubview:dataView2];

//方式三：顯示從網絡獲取的Gif圖片
    // 網絡圖片
    NSData *urlData = [NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://pic19.nipic.com/20120222/8072717_124734762000_2.gif"]];
    //創建一個第三方的View顯示圖片
    GifView *dataViewWeb = [[GifView alloc] initWithFrame:CGRectMake(20, 420, 280, 100) data:urlData];
    [self.view addSubview:dataViewWeb];

GifView.h

#import <UIKit/UIKit.h>
#import <ImageIO/ImageIO.h>

@interface GifView : UIView {
    CGImageSourceRef gif;
    NSDictionary *gifProperties;
    size_t index;
    size_t count;
    NSTimer *timer;
}

- (id)initWithFrame:(CGRect)frame filePath:(NSString *)_filePath;
- (id)initWithFrame:(CGRect)frame data:(NSData *)_data;

@end

GifView.m

#import "GifView.h"
#import <QuartzCore/QuartzCore.h>

@implementation GifView

- (id)initWithFrame:(CGRect)frame filePath:(NSString *)_filePath{
    
    self = [super initWithFrame:frame];
    if (self) {
        
        gifProperties = [[NSDictionary dictionaryWithObject:[NSDictionary dictionaryWithObject:[NSNumber numberWithInt:0] forKey:(NSString *)kCGImagePropertyGIFLoopCount]
                                                     forKey:(NSString *)kCGImagePropertyGIFDictionary] retain];
        gif = CGImageSourceCreateWithURL((CFURLRef)[NSURL fileURLWithPath:_filePath], (CFDictionaryRef)gifProperties);
        count =CGImageSourceGetCount(gif);
        timer = [NSTimer scheduledTimerWithTimeInterval:0.12 target:self selector:@selector(play) userInfo:nil repeats:YES];
        [timer fire];
    }
    return self;
}

- (id)initWithFrame:(CGRect)frame data:(NSData *)_data{
    
    self = [super initWithFrame:frame];
    if (self) {
        
        gifProperties = [[NSDictionary dictionaryWithObject:[NSDictionary dictionaryWithObject:[NSNumber numberWithInt:0] forKey:(NSString *)kCGImagePropertyGIFLoopCount]
                                                     forKey:(NSString *)kCGImagePropertyGIFDictionary] retain];
       gif = CGImageSourceCreateWithData((CFDataRef)_data, (CFDictionaryRef)gifProperties);
        count =CGImageSourceGetCount(gif);
        timer = [NSTimer scheduledTimerWithTimeInterval:0.12 target:self selector:@selector(play) userInfo:nil repeats:YES];
        [timer fire];
    }
    return self;
}

-(void)play
{
    index ++;
    index = index%count;
    CGImageRef ref = CGImageSourceCreateImageAtIndex(gif, index, (CFDictionaryRef)gifProperties);
    self.layer.contents = (id)ref;
    CFRelease(ref);
}
-(void)removeFromSuperview
{
    NSLog(@"removeFromSuperview");
    [timer invalidate];
    timer = nil;
    [super removeFromSuperview];
}
- (void)dealloc {
    NSLog(@"dealloc");
    CFRelease(gif);
    [gifProperties release];
    [super dealloc];
}
@end

<四> 總結

　　1、通過UIImageView顯示動畫效果，實際上是把動態的圖拆成了一組靜態的圖，放到數組中，播放的時候依次從數組中取出。如果播放的圖片比較少占得內存比較小或者比較常用（比如工具條上一直顯示的動態小圖標），可以選擇用imageNamed：方式獲取圖片，但是通過這種方式加到內存中，使用結束，不會自己釋放，多次播放動畫會造成內存溢出問題。因此，對於大圖或經常更換的圖，在取圖片的時候可以選擇imageWithContentsOfFile:方式獲取圖片，優化內存。

　　2、使用UIWebView顯示圖片需要注意顯示圖片的尺寸與UIWebView尺寸的設置，如果只是為了顯示動態圖片，可以禁止UIWebView滾動。在顯示動態圖片的時候，即使是動圖的背景處為透明，默認顯示出來是白色背景，這個時候需要手動設置UIWebView的透明才能達到顯示動圖背景透明的效果。

　　3、第三方的GifView使用比較簡單，把類導入即可。但是GifView是MRC的，因此在ARC環境下，需要對類進行標識。

　　4、UIImageView與第三方的GifView都是通過定時器來控制圖片模擬的動畫，播放的時候是設置每一幀的時長，因此在使用的時候，要盡量與動圖原本的時長靠近，不然動畫效果會有些奇怪。而通過UIWebView加載Gif動圖的時候會保持原有的幀速，不需要再次設置。