iOS加載Gif圖片的N種方式

1.系統(tǒng)UIImageView 多張圖片組成動畫

/** ? * ? UIImageView 動畫 ? * ? Memory-23M ? */ ?

-(void)gifPlay1 ?{?

?// ? ?NSArray ?*array=@[@"image0.png",@"image1.png",@"image2.png"]; ?

// ? ?UIImageView ?*imgview= [UIImageView imageViewAnimation:CGRectMake(50,80, 550/2, 200) ?imageNames:array duration:1]; ? ? ? ? ?

??UIImageView* animatedImageView = [[UIImageView alloc] initWithFrame:CGRectMake(50,80, 550/2, 200)]; ? ? ?animatedImageView.animationImages =@[[UIImage imageNamed:@"image0"], ? ? [UIImage imageNamed:@"image1"], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [UIImage imageNamed:@"image2"] ?]; ? ??

?animatedImageView.animationDuration = 1.0f; ? ? ?

animatedImageView.animationRepeatCount = 0; ? ?

??[self.view addSubview: animatedImageView]; ? ??

?[animatedImageView startAnimating];?

?}




2.利用第三方庫

1)IImageView-PlayGIF ?YFGIFImageView

/** ? * ?UIImageView-PlayGIF 是 UIImageView 子類,用來顯示 GIF。UIIMageView-PlayGIF 性能高,而且占用的內(nèi)存很低。?

? * ?https://github.com/yfme/UIImageView-PlayGIF ? * ?Memory-21.9M ? * ?

#import "YFGIFImageView.h" ?

?*/ ?

-(void)gifPlay2 ?{ ?

?? ?NSString ?*gifPath=[[NSBundle mainBundle] pathForResource:@"test" ofType:@"gif"];?

? ? ?YFGIFImageView ?*gifview=[[YFGIFImageView alloc]init]; ? ?

??gifview.backgroundColor=[UIColor clearColor]; ?

?? ?gifview.gifPath=gifPath; ?

?? ?gifview.frame=CGRectMake(50, 100,550/2, 200);?

? ? ?[self.view addSubview:gifview];?

? ? ?[gifview startGIF];?

?}


2)SCGIFImageView


/** ? * ?摘要: SCGIFImageView是一個開源的GIF圖片動畫顯示控件,通過將GIF的每一幀都取出來生成UIImage對象存放在一個數(shù)組中,然后使用NSTimer進行動畫輪轉(zhuǎn)。 ??

* ?https://github.com/shichangone/SCGifExample ? * ?Memory-22.5M ? *

??#import "SCGIFImageView.h" ??

*/

??-(void)gifPlay3 ?{ ?

?? ?NSString* filePath = [[NSBundle mainBundle] pathForResource:@"test.gif" ofType:nil]; ?

?? ?NSData* imageData = [NSData dataWithContentsOfFile:filePath]; ?

?? ?SCGIFImageView* gifImageView = [[SCGIFImageView alloc]init]; ??

? ?[gifImageView setData:imageData]; ? ?

??gifImageView.frame = CGRectMake(50,100, gifImageView.image.size.width, gifImageView.image.size.height); ? ? ?[self.view addSubview:gifImageView];?

?}


3)YLGIFImage

/** ? * ?YLGIFImage 是異步 GIF 圖像解碼器和圖像查看器,支持播放 GIF 圖像,而且使用很少的內(nèi)存。

?? * ?https://github.com/liyong03/YLGIFImage ? * ?Memory-22.7M ??

* #import "YLImageView.h" ??

* ?#import "YLGIFImage.h" ?

?*/ ?

-(void)gifPlay5 ?{ ?

?? ?YLImageView* imageView = [[YLImageView alloc] initWithFrame:CGRectMake(0, 160, 320, 240)];?

? ? ?[self.view addSubview:imageView]; ??

? ?imageView.image = [YLGIFImage imageNamed:@"test.gif"]; ?

}



4)SDWebImageView里的UIImage+GIF

提供接口:

+ (UIImage *)sd_animatedGIFNamed:(NSString *)name;

+ (UIImage *)sd_animatedGIFWithData:(NSData *)data;

- (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size;


/** ? * ?利用SDWebImageView 庫播放gif ? * ?Memory-22.6M ? *?

?#import "UIImage+GIF.h" ?

?*/?

?-(void)gifPlay6 ?{ ?

?? ?UIImage ?*image=[UIImage sd_animatedGIFNamed:@"test"]; ? ??

?UIImageView ?*gifview=[[UIImageView alloc]initWithFrame:CGRectMake(50,80,image.size.width, image.size.height)]; ? ? ?gifview.backgroundColor=[UIColor orangeColor]; ?

?? ?gifview.image=image;

?? ? ?[self.view addSubview:gifview]; ?

}

5)為MBProgressHUD 添加加載動畫

/** ? * ?MBProgressHUD 添加加載動畫 ? * ?Memory-23.8M ? *?

?#import "UIImage+GIF.h" ?

?* ?#import "MBProgressHUD.h" ??

*/ ?

-(void)gifPlay6 ?{ ?

?? ?UIImage ?*image=[UIImage sd_animatedGIFNamed:@"test"]; ??

? ?UIImageView ?*gifview=[[UIImageView alloc]initWithFrame:CGRectMake(0,0,image.size.width/2, image.size.height/2)]; ?

?? ?gifview.image=image; ? ? ? ?

?? ?MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES]; ? ?

??hud.color=[UIColor grayColor];//默認(rèn)顏色太深了 ??

? ?hud.mode = MBProgressHUDModeCustomView; ? ?

??hud.labelText = @"加載中..."; ? ?

??hud.customView=gifview;?

?}



3.為原生的UIImageView添加類別來支持gif動態(tài)圖的播放

?gif動態(tài)圖文件中包含了一組圖片及其信息,信息主要記錄著每一幀圖片播放的時間,我們?nèi)绻@取到了gif文件中所有的圖片同時又獲取到每一幀圖片播放的時間,就可以為UIImageView添加核心動畫的方法來讓其播放gif的內(nèi)容了。

? ?首先解析gif文件中的數(shù)據(jù),代碼如下:

//要引入ImageIO庫

#import

//解析gif文件數(shù)據(jù)的方法 block中會將解析的數(shù)據(jù)傳遞出來

-(void)getGifImageWithUrk:(NSURL *)url

? ? ? ? ? ? ? returnData:(void(^)(NSArray * imageArray,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?NSArray*timeArray,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGFloat totalTime,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?NSArray* widths,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?NSArray* heights))dataBlock{

? ?//通過文件的url來將gif文件讀取為圖片數(shù)據(jù)引用

? ?CGImageSourceRef source = CGImageSourceCreateWithURL((CFURLRef)url, NULL);

? ?//獲取gif文件中圖片的個數(shù)

? ?size_t count = CGImageSourceGetCount(source);

? ?//定義一個變量記錄gif播放一輪的時間

? ?float allTime=0;

? ?//存放所有圖片

? ?NSMutableArray * imageArray = [[NSMutableArray alloc]init];

? ?//存放每一幀播放的時間

? ?NSMutableArray * timeArray = [[NSMutableArray alloc]init];

? ?//存放每張圖片的寬度 (一般在一個gif文件中,所有圖片尺寸都會一樣)

? ?NSMutableArray * widthArray = [[NSMutableArray alloc]init];

? ?//存放每張圖片的高度

? ?NSMutableArray * heightArray = [[NSMutableArray alloc]init];

? ?//遍歷

? ?for (size_t i=0; i

? ? ? ?CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);

? ? ? ?[imageArray addObject:(__bridge UIImage *)(image)];

? ? ? ?CGImageRelease(image);

? ? ? ?//獲取圖片信息

? ? ? ?NSDictionary * info = (__bridge NSDictionary*)CGImageSourceCopyPropertiesAtIndex(source, i, NULL);

? ? ? ?CGFloat width = [[info objectForKey:(__bridge NSString *)kCGImagePropertyPixelWidth] floatValue];

? ? ? ?CGFloat height = [[info objectForKey:(__bridge NSString *)kCGImagePropertyPixelHeight] floatValue];

? ? ? ?[widthArray addObject:[NSNumber numberWithFloat:width]];

? ? ? ?[heightArray addObject:[NSNumber numberWithFloat:height]];

? ? ? ?NSDictionary * timeDic = [info objectForKey:(__bridge NSString *)kCGImagePropertyGIFDictionary];

? ? ? ?CGFloat time = [[timeDic objectForKey:(__bridge NSString *)kCGImagePropertyGIFDelayTime]floatValue];

? ? ? ?allTime+=time;

? ? ? ?[timeArray addObject:[NSNumber numberWithFloat:time]];

? ?}

? ?dataBlock(imageArray,timeArray,allTime,widthArray,heightArray);

}

為UIImageView添加一個設(shè)置gif圖內(nèi)容的方法:

-(void)yh_setImage:(NSURL *)imageUrl{

? ? ? ?__weak id __self = self;

? ? ? ?[self getGifImageWithUrk:imageUrl returnData:^(NSArray *imageArray, NSArray *timeArray, CGFloat totalTime, NSArray *widths, NSArray *heights) {

? ? ? ? ? ?//添加幀動畫

? ? ? ? ? ?CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];

? ? ? ? ? ?NSMutableArray * times = [[NSMutableArray alloc]init];

? ? ? ? ? ?float currentTime = 0;

? ? ? ? ? ?//設(shè)置每一幀的時間占比

? ? ? ? ? ?for (int i=0; i

? ? ? ? ? ? ? ?[times addObject:[NSNumber numberWithFloat:currentTime/totalTime]];

? ? ? ? ? ? ? ?currentTime+=[timeArray[i] floatValue];

? ? ? ? ? ?}

? ? ? ? ? ?[animation setKeyTimes:times];

? ? ? ? ? ?[animation setValues:imageArray];

? ? ? ? ? ?[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

? ? ? ? ? ?//設(shè)置循環(huán)

? ? ? ? ? ?animation.repeatCount= MAXFLOAT;

? ? ? ? ? ?//設(shè)置播放總時長

? ? ? ? ? ?animation.duration = totalTime;

? ? ? ? ? ?//Layer層添加

? ? ? ? ? ?[[(UIImageView *)__self layer]addAnimation:animation forKey:@"gifAnimation"];

? ? ? ?}];

}

使用代碼示例如下:

? ?UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0,0 , 320, 200)];

? ?NSURL * url = [[NSURL alloc]initFileURLWithPath:[[NSBundle mainBundle] pathForResource:imageName ofType:nil]];

? ?[imageView yh_setImage:url];

? ?[self.view addSubview:imageView];

三、使用UIWebView來加載gif動態(tài)圖數(shù)據(jù)

? ?iOS中的UIWebView功能十分強大,可以通過UIWebView為載體,來展示gif圖。并且這種方法也十分簡單,代碼如下:

? ? ? ? //讀取gif數(shù)據(jù)

? ? ? ? NSData *gifData = [NSData dataWithContentsOfURL:imageUrl];

? ? ? ?UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];

? ? ? ?//取消回彈效果

? ? ? ?webView.scrollView.bounces=NO;

? ? ? ?webView.backgroundColor = [UIColor clearColor];

? ? ? ?//設(shè)置縮放模式

? ? ? ?webView.scalesPageToFit = YES;

? ? ? ?//用webView加載數(shù)據(jù)

? ? ? ?[webView loadData:gifData MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];

*上面兩種加載gif動態(tài)圖方式的優(yōu)劣

? ?經(jīng)過測試,從加載速度上來說,通過UIImageView類別加載的方式更加快速,UIWebView的方式加載時間會稍長,但是從性能上來比較,WebView的方式性能更優(yōu),播放的gif動態(tài)圖更加流暢。在開發(fā)中,可以根據(jù)需求,適當(dāng)選擇,例如雖然WebView加載的方式性能更好,但是在許多情況下,原生的UIImageView能夠更加自由的讓開發(fā)者進行擴展。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,488評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,034評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,327評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,554評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,337評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,883評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,975評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,114評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,625評論 1 332
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,555評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,737評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,244評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 43,973評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,615評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,343評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,699評論 2 370

推薦閱讀更多精彩內(nèi)容