Dealing with Animation: Simple Sequential Image Animation

Today, I am creating a simple animation with an array of sequential images. Animation like this are sometimes very useful like displaying a person is walking rather than a static stalled image.

I am doing a Bonfire(http://appsamuck.com/day2.html) today. A fire is set with pile  of woods and it is burning. So, I am going to set images frame after frame within a short interval of time so that it seems alive. I picked 17 images.

Step1:  First, we create a project "Bonfire" which should be a view based application.


Step2: I wanted the app to be full screen and not to show the status bar. So, I double clicked on info.plist and added a row"Status bar is initially hidden" and checked it.

Step3: I have declared IBOutlet for an UIImage View and named it campFireView in .h file of viewController and in .m file I synthesized it.

BonfireViewController.h

#import

@interface BonfireViewController : UIViewController 

{

IBOutlet UIView *animationView;

IBOutlet UIImageView *campFireView;

}

@property (nonatomic,retain) UIImageView *campFireView;

@end

Step4: I declared a method .h of viewController named "startAnimation"with a void return type and in .m file implemented it like followed.

And called the method from viewDidLoad 

- (void)viewDidLoad 

{

    [super viewDidLoad];

[self startAnimation];

}

BonfireViewController.h

#import

@interface BonfireViewController : UIViewController 

{

IBOutlet UIView *animationView;

IBOutlet UIImageView *campFireView;

}

@property (nonatomic,retain) UIImageView *campFireView;

- (void) startAnimation;

@end

BonfireViewController.m

- (void) startAnimation

{

campFireView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 480)];

campFireView.animationImages = [NSArray arrayWithObjects:[UIImage imageNamed:@"campFire01.gif"],[UIImage imageNamed:@"campFire02.gif"],[UIImage imageNamed:@"campFire03.gif"],[UIImage imageNamed:@"campFire04.gif"],[UIImage imageNamed:@"campFire05.gif"],[UIImage imageNamed:@"campFire06.gif"],[UIImage imageNamed:@"campFire07.gif"],[UIImage imageNamed:@"campFire08.gif"],[UIImage imageNamed:@"campFire09.gif"],[UIImage imageNamed:@"campFire10.gif"],[UIImage imageNamed:@"campFire11.gif"],[UIImage imageNamed:@"campFire12.gif"],[UIImage imageNamed:@"campFire13.gif"],[UIImage imageNamed:@"campFire14.gif"],[UIImage imageNamed:@"campFire15.gif"],[UIImage imageNamed:@"campFire16.gif"],[UIImage imageNamed:@"campFire17.gif"],nil];

campFireView.animationDuration = 1.75;

campFireView.animationRepeatCount = 0;

[campFireView startAnimating];

[self.view addSubview:campFireView];

[campFireView release];

}

Step5: I have added a new group under resource folder and put the 17 imaged under it.

Step6: Build and Run. and the app shows as followed.