Tuesday, March 15, 2011

Gif animation in iPhone

Gif animation in iPhone/iPad app OR How to implement .gif file in iPhone/iPad app.

Here we will see how an UIImage can be used to implement similar effect as in .gif animation like this:

To show an animation or to implement .gif file in your iPhone/iPad app view follow these steps:

Step 1: Create new project in xcode and name it as "gif_Animation".

Step 2: First of all split the .gif file into frames (because gif file is nothing but a series of images, and also iPhone/iPad app does not directly support gif file).
Here for example we split the .gif  file and save frame as:

  • frame1.jpg
  • frame2.jpg
  • frame3.jpg
  • frame4.jpg
  • frame5.jpg

Step 3: Add all frames into resource folder.

Step 4: Now open "gif_AnimationViewController.h" and add this code:

#import <UIKit/UIKit.h>
@interface gif_AnimationViewController : UIViewController {

 UIImageView   *animatedImages;
 NSMutableArray *imageArray;
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
Step 5: Now open "gif_AnimationViewController.m" and add this code: 

#import "gif_AnimationViewController.h"

#define IMAGE_COUNT       5
#define IMAGE_HEIGHT      480 
#define IMAGE_WIDTH       320

@implementation gif_AnimationViewController

imageArray = [[NSMutableArray alloc] initWithCapacity:IMAGE_COUNT];
// Array to hold jpg images

imageArray = [NSMutableArray arrayWithObjects: [UIImage imageNamed:@"frame1.jpg"], [UIImage imageNamed:@"frame2.jpg"], [UIImage imageNamed:@"frame3.jpg"], [UIImage imageNamed:@"frame4.jpg"], [UIImage imageNamed:@"frame5.jpg"], nil];
// Animated images - centered on screen
animatedImages = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,IMAGE_WIDTH, IMAGE_HEIGHT)];
animatedImages.animationImages = [NSArray arrayWithArray:imageArray];
// One cycle through all the images takes 1.5 seconds
animatedImages.animationDuration =1;
// Repeat forever
animatedImages.animationRepeatCount = -1;
// Add subview and make window visible
[self.view addSubview:animatedImages];
// Start it up
[animatedImages startAnimating];
// Wait 5 seconds, then stop animation
[self performSelector:@selector(stopAnimation) withObject:nil afterDelay:8.0];
- (void)stopAnimation
[animatedImages stopAnimating];

//if we want to stop animation by user touch without any delay then use this
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
[self performSelector:@selector(stopAnimation) withObject:nil afterDelay:0.0];

// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    return self;

// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];

// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;

- (void)dealloc {
    [super dealloc];
[imageArray release];
[animatedImages release];


Step 6: Now run your project, it will look like this:

 Happy Coding :)



  1. Great post I would like to thank you for the efforts you have made in writing this interesting and knowledgeable article.

    ipad application development

  2. Hello,
    Because of this IPAD application development is now in demand in the worldwide market. Today is a potential market for independent developers and corporate developers who are interested in taking advantage of their experience.

    ipad application development

  3. This comment has been removed by the author.

  4. Thanks for sharing as it is an excellent post would love to read your future post

    Mobile App Cross Platform Development && Hire Php Developer India