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];//默認顏色太深了 ??

? ?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ù)需求,適當選擇渔肩,例如雖然WebView加載的方式性能更好纸泡,但是在許多情況下,原生的UIImageView能夠更加自由的讓開發(fā)者進行擴展赖瞒。

最后編輯于
?著作權(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)自己被綠了女轿。 大學(xué)時的朋友給我發(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)容