Adding .gifs to apps using Objective-C can be tricky. If you want to insert them as a UIImage, it requires you to have the frames to make animate the .gif. This is fine if you’re making your own .gifs, but what if you want to use .gifs that you’ve found?

I found three main ways of inserting gifs into an app on XCode:

  1. FLAnimatedImage
  2. UIImage+AnimatedGif
  3. Using a WebView

The first two options use third-party frameworks. This was my first time using any frameworks from outside the Foundation libraries. To use FLAnimatedImage and UIImage+AnimatedGif, I downloaded a set of files from their GitHub page. I then added the .h and .m files to a group called “Library” in my XCode project and imported these files into my ViewController.h file. I also added the .gif I wanted to use to an “Images” group.

 

Because I wanted to see how the three methods compared visually, I made two Image Views and one Web View on story board. I connected the two Image Views to IBOutlet properties in ViewController.h.

In my code, I opted to make each gif from scratch, as if I weren’t using any other methods.

All of the below code was done in the ViewController.m’s viewDidLoad method.

FLAnimatedImage

First, I created a FLAnimated image from the file I saved. I used initWithAnimatedGIFData:  to make an FLAnimatedImage from the NSData of the saved file.

Next, I used the FLAnimatedImageView property from the .h file to save the above file as the animatedImage property of the FLAnimatedImageView class.

Finally, I make the imageWithFLA a subview, so that it actually appears in the app!

 FLAnimatedImage *redPandaWithFLA = [[FLAnimatedImage alloc] initWithAnimatedGIFData:[NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Red-Panda" ofType:@"gif"]]];
self.imageWithFLA.animatedImage = redPandaWithFLA ;
[ self.view addSubview:self.imageWithFLA];

UIImage+animatedGif

UIImage+animatedGif creates a new animatedImage category for the already existing UIImage class.

First, I created a UIImage using the saved file, then made the .image property of the UIImageView class equal to that UIImage.

 UIImage *redPandaWithUIImage = [ UIImage animatedImageWithAnimatedGIFData:[NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Red-Panda" ofType:@"gif"]]];
 self.imageWithUIImage.image = redPandaWithUIImage;

WebView

This method involves creating a WebView. I used the file, then made a CGRect for the WebView that I created in the storyboard. Then I initialized a WebView and loaded the gif to that WebView. Make sure to disable User Interaction so people can’t scroll. Finally, make the WebView appear on storyboard!

 NSData *gif = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Red-Panda" ofType:@"gif"]];

 CGRect rect = CGRectMake(20, 380, 280, 162 );
 UIWebView *redPandaWebView = [[UIWebView alloc] initWithFrame:rect];
 redPandaWebView.delegate=self;

 [redPandaWebView loadData:gif MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
 [redPandaWebView setUserInteractionEnabled:NO];

 [self.view addSubview:redPandaWebView];

Here you can see a .gif of the .gifs in the app.

gifPreview

The top gif was added using FLAnimatedImage, middle using UIImage+animatedGIF, and bottom using a WebView.

Resources:

FLAnimatedImage Github
FLAnimatedImage Tutorial

UIImage+AnimatedGif Github

Make An Awesome Video Background 

Advertisements