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;
@end
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

-(void)viewWillAppear:(BOOL)animated 
{ 
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];
}


@end 

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



 Happy Coding :)

Next….


5 comments:

  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

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. 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

    ReplyDelete
  4. Thanks for this. I really like what you've posted here and wish you the best of luck with this blog and thanks for sharing. Apple Developer Enterprise Program Certificate

    ReplyDelete