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 :)