IOS 播放動態Gif圖片


圖片分為靜態和動態兩種,圖片的格式有很多種,在開發中比較常見的是.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動圖的時候會保持原有的幀速,不需要再次設置。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM