How to play GIF dynamic graph on IOS

Original link: http://my.oschina.net/u/2340880/blog/608560

Summary
There is no ready-made interface in iOS to show GIF animated images, but there are other ways to handle the display of GIF images.
Discussion on how to play GIF dynamic graph in iOS

First, Introduction

In iOS development, the Uiimageview class is dedicated to rendering image data, and Uiimageview also has frame animations to play a set of images, but for GIF type data, there is no ready-made interface for developers to use in Uiimageview. In iOS, there are generally two ways to play GIF dynamic diagram, one way is to use the method in the ImageIO frame to parse the GIF file, and then using the Coreanimation core animation to play the GIF animation, another way to care about the simple, GIF images can be rendered directly from WebView.

Ii. adding categories to native Uiimageview to support the playback of GIF animated graphs

The GIF dynamic image file contains a set of pictures and their information, which mainly records the time each frame is played, and if we get all the pictures in the GIF file and get the time to play each frame of the picture, You can add a core animation method to Uiimageview to play the contents of the GIF.

The data in the GIF file is parsed first, with the following code:

To introduce the ImageIO library
#import <ImageIO/ImageIO.h>

Methods for parsing GIF file data The parsed data is passed in the block
-(void) Getgifimagewithurk: (nsurl *) URL
Returndata: (void (^) (nsarray<uiimage *> * Imagearray,
Nsarray<nsnumber *>*timearray,
CGFloat TotalTime,
Nsarray<nsnumber *>* Widths,
Nsarray<nsnumber *>* Heights)) datablock{
To read a GIF file as a picture data reference through the URL of the file
Cgimagesourceref Source = Cgimagesourcecreatewithurl ((cfurlref) URL, NULL);
Get the number of pictures in a GIF file
size_t count = cgimagesourcegetcount (source);
Define a variable record the time of the GIF play round
float alltime=0;
Store all pictures
Nsmutablearray * Imagearray = [[Nsmutablearray alloc]init];
Hold the time of each frame playback
Nsmutablearray * Timearray = [[Nsmutablearray alloc]init];
Keep the width of each picture (usually in a GIF file, all the pictures will be the same size)
Nsmutablearray * Widtharray = [[Nsmutablearray alloc]init];
The height of each picture is stored
Nsmutablearray * Heightarray = [[Nsmutablearray alloc]init];
Traverse
for (size_t i=0; i<count; i++) {
Cgimageref image = Cgimagesourcecreateimageatindex (source, I, NULL);
[Imagearray addobject: (__bridge UIImage *) (image)];
Cgimagerelease (image);
Get picture information
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);
}
Add a method for Uiimageview to set the contents of the GIF diagram:

-(void) Yh_setimage: (Nsurl *) imageurl{
__weak id __self = self;
[Self Getgifimagewithurk:imageurl returndata:^ (nsarray<uiimage *> *imagearray, Nsarray<nsnumber *> * Timearray, CGFloat totaltime, Nsarray<nsnumber *> *widths, Nsarray<nsnumber *> *heights) {
Adding frame Animations
Cakeyframeanimation *animation = [cakeyframeanimation animationwithkeypath:@ "Contents"];
Nsmutablearray * times = [[Nsmutablearray alloc]init];
float currenttime = 0;
Set the time ratio per frame
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 settimingfunction:[camediatimingfunction functionwithname:kcamediatimingfunctionlinear];
Set up loops
Animation.repeatcount= maxfloat;
Set the total duration of playback
Animation.duration = TotalTime;
Layer Add
[[(Uiimageview *) __self layer]addanimation:animation forkey:@ "Gifanimation"];
}];
}
The following code examples are used:

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];


Third, use UIWebView to load GIF dynamic graph data

The UIWebView feature in iOS is very powerful and can be used as a vector to display GIF images in UIWebView. And this method is very simple, the code is as follows:

Reading GIF data
NSData *gifdata = [NSData Datawithcontentsofurl:imageurl];
UIWebView *webview = [[UIWebView alloc] Initwithframe:cgrectmake (0, 0, Self.frame.size.width, Self.frame.size.height)] ;
Cancel Rebound effect
Webview.scrollview.bounces=no;
Webview.backgroundcolor = [Uicolor Clearcolor];
Setting the zoom mode
Webview.scalespagetofit = YES;
Loading data with WebView
[WebView loaddata:gifdata mimetype:@ "Image/gif" Textencodingname:nil Baseurl:nil];
The advantages and disadvantages of two modes of loading GIF dynamic graphs

After testing, from the loading speed, the way to load through the Uiimageview category faster, UIWebView load time will be slightly longer, but from the performance to compare, WebView way better performance, play GIF dynamic diagram more fluent. In development, depending on the needs, the appropriate choice, for example, although the webview load better performance, but in many cases, the native Uiimageview can be more free to allow developers to expand.

How to play GIF dynamic graph on IOS