iOS中播放gif動態(tài)圖

一、引言

在iOS開發(fā)中,UIImageView類專門來負責圖片數(shù)據(jù)的渲染,并且UIImageView也有幀動畫的方法來播放一組圖片鹰晨,但是對于gif類型的數(shù)據(jù),UIImageView中并沒有現(xiàn)成的接口提供給開發(fā)者使用方淤,在iOS中一般可以通過兩種方式來播放gif動態(tài)圖,一種方式是通過ImageIO框架中的方法將gif文件中的數(shù)據(jù)進行解析,再使用coreAnimation核心動畫來播放gif動畫嘱丢,另一種方式計較簡單,可以直接通過webView來渲染gif圖祠饺。

二越驻、為原生的UIImageView添加類別來支持gif動態(tài)圖的播放

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

-(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 = [[NSMutableArrayalloc]init];

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

NSMutableArray* timeArray = [[NSMutableArrayalloc]init];

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

NSMutableArray* widthArray = [[NSMutableArrayalloc]init];

//存放每張圖片的高度

NSMutableArray* heightArray = [[NSMutableArrayalloc]init];

//遍歷

for(size_t i=0; i<count;i++){

CGImageRef image = CGImageSourceCreatImageAtIndex(sources,NULL);

[imageArray addObject:(_bridge UIImage*)(image)];

CGImageRelease(image)

//獲取圖片信息

NSDictionary *info =(_bridge NSDictionary*)CGImageSourceCopyPropertiesAtIndex(sources,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 NNString *)kCGImagePropertyGIFDictionary];

CGFloat time = [[timeDic objectForKey:(_bridge NNString*)kCGImagePropertyGIFDelatime] floatValue];

allTime +=time;

[timeArray addObject:[NSnumber numberWithFloat:time]];

CFRelease(info)

}

CFRelease(source);

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

}

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

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

__weak id __self = self;

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

//添加幀動畫

CAkeyframeAnimation *animation = [CAkeyframeAnimation animationwithkeyPath:@"contents"];

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

float currentTime = 0;

for (int i = 0; i<imageArray.count;i++){

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

currentTime +=[timeArray[i] floatValue];

}

[animation setKeyTimes:times];

[animation setValues:imageArray];

[animation setTimingFunchtion:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];

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

animation.repeatCount = MaxFLOAT;

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

animation.duration = totalTime;

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

}]

}

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

NSData *gifData = [ NSData dataWithContentsOfURL:imageUrl];

WKWebView *wkbview = [WkWebView alloc]initWithFrame:CGRectMake(0,0,self.frame.size.width,self.frame.size.height);

wkbview.backgroundColor =[UIColor clearColor];

wkbview.scalesPageToFit = YES;

[wkbview loadData:gitData MIMEType:@"image/gif" textEncodingName:nil baseURL:nil]

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


參考牛人,琿少的文章:https://my.oschina.net/u/2340880/blog/608560姑宽;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遣耍,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子低千,更是在濱河造成了極大的恐慌配阵,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件示血,死亡現(xiàn)場離奇詭異棋傍,居然都是意外死亡,警方通過查閱死者的電腦和手機难审,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門瘫拣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人告喊,你說我怎么就攤上這事麸拄∨擅粒” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵拢切,是天一觀的道長蒂萎。 經(jīng)常有香客問我,道長淮椰,這世上最難降的妖魔是什么五慈? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮主穗,結(jié)果婚禮上泻拦,老公的妹妹穿的比我還像新娘。我一直安慰自己忽媒,他們只是感情好争拐,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晦雨,像睡著了一般架曹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上金赦,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天音瓷,我揣著相機與錄音,去河邊找鬼夹抗。 笑死绳慎,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的漠烧。 我是一名探鬼主播杏愤,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼已脓!你這毒婦竟也來了珊楼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤度液,失蹤者是張志新(化名)和其女友劉穎厕宗,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體堕担,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡已慢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了霹购。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片佑惠。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出膜楷,到底是詐尸還是另有隱情旭咽,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布赌厅,位于F島的核電站穷绵,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏察蹲。R本人自食惡果不足惜请垛,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一催训、第九天 我趴在偏房一處隱蔽的房頂上張望洽议。 院中可真熱鬧,春花似錦漫拭、人聲如沸亚兄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽审胚。三九已至,卻和暖如春礼旅,著一層夾襖步出監(jiān)牢的瞬間膳叨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工痘系, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留菲嘴,地道東北人。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓汰翠,卻偏偏與公主長得像龄坪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子复唤,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

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

  • 1.系統(tǒng)UIImageView 多張圖片組成動畫 /** * UIImageView 動畫 * Memor...
    zhengelababy閱讀 8,706評論 3 6
  • 1. 原生方法: UIWebView特點:加載速度略長,性能更優(yōu)健田,播放的gif動態(tài)圖更加流暢。 UIImagVie...
    奮斗的蝸牛閱讀 4,359評論 1 1
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫佛纫,核心動畫妓局,幀動畫,自定義轉(zhuǎn)場動畫呈宇。 1.UIView...
    請叫我周小帥閱讀 3,076評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果好爬,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌攒盈。在這里你可以看...
    每天刷兩次牙閱讀 8,465評論 6 30
  • 今天抵拘,俺和媳婦陪同老師一家去昌邑看望并拍攝一位百歲老人,俗話說“家有一老型豁,如獲至寶”僵蛛,貼切尚蝌,自己也深受教育,深有感...
    碧海青天2017閱讀 1,471評論 2 2