Hi Readers,

In this blog, we will discuss how to display GIF images in view controller as GIF images are different from JPG images because GIF images include animation. We can easily display the images with JPG format by using UIImageView but for GIF images we need to include some frameworks essential to display animated images that are GIF images.

So here we will learn how to display GIF images. For that, first of all we will create a project and then install pod for further processing. Some steps are there to install pod which is given below with screenshots:-

With the above screenshot we will get to know that first of all path should be included with in the terminal to create pod file in that project and after creation of pod file we have to include that framework which we want to install as given in below screenshot:-

With the above screenshot, we get to know that what we have to write after the creation of pod file and then we will install this pod as given in a first screenshot. After this we will directly move towards to the coding part as user interface also we are creating with the help of code.

Below is the code to display GIF image in a view controller.

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end


ViewController.m

#import "ViewController.h"
#import <FLAnimatedImage/FLAnimatedImage.h>

@interface ViewController ()
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) FLAnimatedImageView *imageView;

@end


@implementation ViewController

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    
    self.view.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1.0];
    
    self.titleLabel.frame = CGRectMake(18.0, 27.0, self.titleLabel.bounds.size.width, self.titleLabel.bounds.size.height);


    if (!self.imageView) {
        self.imageView = [[FLAnimatedImageView alloc] init];
        self.imageView.contentMode = UIViewContentModeScaleAspectFill;
        self.imageView.clipsToBounds = YES;
    }
    [self.view addSubview:self.imageView];
    self.imageView.frame = CGRectMake(0.0, 120.0, self.view.bounds.size.width, 447.0);

    NSURL *url = [NSURL URLWithString:@"https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"];
    [self loadAnimatedImageWithURL:url completion:^(FLAnimatedImage *animatedImage) {
        self.imageView.animatedImage = animatedImage;
        self.imageView.userInteractionEnabled = YES;
    }];
}


#pragma mark -

- (UILabel *)titleLabel
{
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.font = [UIFont fontWithName:@"HelveticaNeue-Medium" size:31.0];
        _titleLabel.textColor = [UIColor colorWithWhite:0.05 alpha:1.0];
        _titleLabel.text = @"GIF Image";
        [_titleLabel sizeToFit];
    }
    _titleLabel.backgroundColor = self.view.backgroundColor;
    [self.view addSubview:_titleLabel];
    
    return _titleLabel;
}


- (void)loadAnimatedImageWithURL:(NSURL *const)url completion:(void (^)(FLAnimatedImage *animatedImage))completion
{
    NSString *const filename = url.lastPathComponent;
    NSString *const diskPath = [NSHomeDirectory() stringByAppendingPathComponent:filename];
    
    NSData * __block animatedImageData = [[NSFileManager defaultManager] contentsAtPath:diskPath];
    FLAnimatedImage * __block animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:animatedImageData];
    
    if (animatedImage) {
        if (completion) {
            completion(animatedImage);
        }
    } else {
        [[[NSURLSession sharedSession] dataTaskWithURL:url completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
            animatedImageData = data;
            animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:animatedImageData];
            if (animatedImage) {
                if (completion) {
                    dispatch_async(dispatch_get_main_queue(), ^{
                        completion(animatedImage);
                    });
                }
                [data writeToFile:diskPath atomically:YES];
            }
        }] resume];
    }
}


@end

Output:-

Below are 3 screenshots of output which are showing different views of a single image because this is an GIF image and earth in the given image is revolving so that different screenshots are given:-

You can also download the project from the link given below:-