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

<一> UIImageView用來顯示圖片, 使用UIImageView中的動畫數組來實現圖片的動畫效果
1 //創建UIImageView,添加到界面 2 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)]; 3 [self.view addSubview:imageView]; 4 //創建一個數組,數組中按順序添加要播放的圖片(圖片為靜態的圖片) 5 NSMutableArray *imgArray = [NSMutableArray array]; 6 for (int i=1; i<7; i++) { 7 UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"clock%02d.png",i]]; 8 [imgArray addObject:image]; 9 } 10 //把存有UIImage的數組賦給動畫圖片數組 11 imageView.animationImages = imgArray; 12 //設置執行一次完整動畫的時長 13 imageView.animationDuration = 6*0.15; 14 //動畫重復次數 (0為重復播放) 15 imageView.animationRepeatCount = 0; 16 //開始播放動畫 17 [imageView startAnimating]; 18 //停止播放動畫 - (void)stopAnimating; 19 //判斷是否正在執行動畫 - (BOOL)isAnimating;
<二> 用UIWebView來顯示動態圖片
1 //得到圖片的路徑 2 NSString *path = [[NSBundle mainBundle] pathForResource:@"happy" ofType:@"gif"]; 3 //將圖片轉為NSData 4 NSData *gifData = [NSData dataWithContentsOfFile:path]; 5 //創建一個webView,添加到界面 6 UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 150, 200, 200)]; 7 [self.view addSubview:webView]; 8 //自動調整尺寸 9 webView.scalesPageToFit = YES; 10 //禁止滾動 11 webView.scrollView.scrollEnabled = NO; 12 //設置透明效果 13 webView.backgroundColor = [UIColor clearColor]; 14 webView.opaque = 0; 15 //加載數據 16 [webView loadData:gifData MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
<三> 用第三方GifView顯示本地圖片
GifView是封裝好的一個類,可以直接導入程序中,然后創建對象,來顯示動態圖片;需要注意的是,GifView是MRC的,因此在ARC工程中使用它,需要修改標記 –fno-objc-arc

1 //方式一:顯示本地Gif圖片 2 //將圖片轉為NSData數據 3 NSData *localData = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"bird" ofType:@"gif"]]; 4 //創建一個第三方的View顯示圖片 5 GifView *dataView = [[GifView alloc] initWithFrame:CGRectMake(0, 300, 200, 100) data:localData]; 6 [self.view addSubview:dataView]; 7 //方式二:顯示本地Gif圖片 8 //得到圖片的路徑 9 NSString *path = [[NSBundle mainBundle] pathForResource:@"cat" ofType:@"gif"]; 10 //創建一個第三方的View顯示圖片 11 GifView *dataView2 = [[GifView alloc] initWithFrame:CGRectMake(200, 300, 150, 100) filePath:path]; 12 [self.view addSubview:dataView2]; 13 //方式三:顯示從網絡獲取的Gif圖片 14 // 網絡圖片 15 NSData *urlData = [NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://pic19.nipic.com/20120222/8072717_124734762000_2.gif"]]; 16 //創建一個第三方的View顯示圖片 17 GifView *dataViewWeb = [[GifView alloc] initWithFrame:CGRectMake(20, 420, 280, 100) data:urlData]; 18 [self.view addSubview:dataViewWeb];
GifView.h
1 #import <UIKit/UIKit.h> 2 #import <ImageIO/ImageIO.h> 3 @interface GifView : UIView { 4 CGImageSourceRef gif; 5 NSDictionary *gifProperties; 6 size_t index; 7 size_t count; 8 NSTimer *timer; 9 } 10 - (id)initWithFrame:(CGRect)frame filePath:(NSString *)_filePath; 11 - (id)initWithFrame:(CGRect)frame data:(NSData *)_data; 12 @end
GifView.m
1 #import "GifView.h" 2 #import <QuartzCore/QuartzCore.h> 3 @implementation GifView 4 - (id)initWithFrame:(CGRect)frame filePath:(NSString *)_filePath{ 5 self = [super initWithFrame:frame]; 6 if (self) { 7 gifProperties = [[NSDictionary dictionaryWithObject:[NSDictionary dictionaryWithObject:[NSNumber numberWithInt:0] forKey:(NSString *)kCGImagePropertyGIFLoopCount] 8 forKey:(NSString *)kCGImagePropertyGIFDictionary] retain]; 9 gif = CGImageSourceCreateWithURL((CFURLRef)[NSURL fileURLWithPath:_filePath], (CFDictionaryRef)gifProperties); 10 count =CGImageSourceGetCount(gif); 11 timer = [NSTimer scheduledTimerWithTimeInterval:0.12 target:self selector:@selector(play) userInfo:nil repeats:YES]; 12 [timer fire]; 13 } 14 return self; 15 } 16 - (id)initWithFrame:(CGRect)frame data:(NSData *)_data{ 17 self = [super initWithFrame:frame]; 18 if (self) { 19 gifProperties = [[NSDictionary dictionaryWithObject:[NSDictionary dictionaryWithObject:[NSNumber numberWithInt:0] forKey:(NSString *)kCGImagePropertyGIFLoopCount] 20 forKey:(NSString *)kCGImagePropertyGIFDictionary] retain]; 21 gif = CGImageSourceCreateWithData((CFDataRef)_data, (CFDictionaryRef)gifProperties); 22 count =CGImageSourceGetCount(gif); 23 timer = [NSTimer scheduledTimerWithTimeInterval:0.12 target:self selector:@selector(play) userInfo:nil repeats:YES]; 24 [timer fire]; 25 } 26 return self; 27 } 28 -(void)play 29 { 30 index ++; 31 index = index%count; 32 CGImageRef ref = CGImageSourceCreateImageAtIndex(gif, index, (CFDictionaryRef)gifProperties); 33 self.layer.contents = (id)ref; 34 CFRelease(ref); 35 } 36 -(void)removeFromSuperview 37 { 38 NSLog(@"removeFromSuperview"); 39 [timer invalidate]; 40 timer = nil; 41 [super removeFromSuperview]; 42 } 43 - (void)dealloc { 44 NSLog(@"dealloc"); 45 CFRelease(gif); 46 [gifProperties release]; 47 [super dealloc]; 48 } 49 @end
<四> 總結
1、通過UIImageView顯示動畫效果,實際上是把動態的圖拆成了一組靜態的圖,放到數組中,播放的時候依次從數組中取出。如果播放的圖片比較少占得內存比較小或者比較常用(比如工具條上一直顯示的動態小圖標),可以選擇用imageNamed:方式獲取圖片,但是通過這種方式加到內存中,使用結束,不會自己釋放,多次播放動畫會造成內存溢出問題。因此,對於大圖或經常更換的圖,在取圖片的時候可以選擇imageWithContentsOfFile:方式獲取圖片,優化內存。
2、使用UIWebView顯示圖片需要注意顯示圖片的尺寸與UIWebView尺寸的設置,如果只是為了顯示動態圖片,可以禁止UIWebView滾動。在顯示動態圖片的時候,即使是動圖的背景處為透明,默認顯示出來是白色背景,這個時候需要手動設置UIWebView的透明才能達到顯示動圖背景透明的效果。
3、第三方的GifView使用比較簡單,把類導入即可。但是GifView是MRC的,因此在ARC環境下,需要對類進行標識。
4、UIImageView與第三方的GifView都是通過定時器來控制圖片模擬的動畫,播放的時候是設置每一幀的時長,因此在使用的時候,要盡量與動圖原本的時長靠近,不然動畫效果會有些奇怪。而通過UIWebView加載Gif動圖的時候會保持原有的幀速,不需要再次設置。
