iPhone dev – Performing sequential UIView animations



Hello all,

This is a quick tutorial to provide a solution to sequential animations in a UIView. By sequential animations I mean having one animation complete and only after it completes begin the next animation. This is pretty easy to do with some relatively simple code.

I have included a simple xcode project to showcase this functionality which can be downloaded here: Project Download

When performing a UIView animation you are able to specify a function which will be hit when that animation completes. With this we essentially can chain the animations so when one completes it will then call a function which begins another animation. This method means that you will be adding a new function for every animation you would like to chain but for the most part this feature is mostly used to do one animation and once its completed do some work.

Lets get started

In my example I’m animating 3 imageviews where I just set the background color to red. When you press the button they will move from left to right and one at a time and if you press it again it’ll do the same thing but backwards.

my header


@interface sequentialAnimationExampleViewController : UIViewController {
	//Our images to animate
        IBOutlet UIImageView *image1;
	IBOutlet UIImageView *image2;
	IBOutlet UIImageView *image3;

	BOOL areImagesOnLeft;
}
//The button click to start the animations
- (IBAction)startAnimation;

@end

So the code that really matters is the animation blocks and we’ll just look at one in detail.

//Start of the chain
- (IBAction)startAnimation
{
	[UIView beginAnimations:@"animate" context:nil];
       //choose a random time for the animation
	[UIView setAnimationDuration:arc4random()%3];
       //This is specifying that our function "animation1Completed" will be called when the animation completes
	[UIView setAnimationDidStopSelector:@selector(animation1Completed)];
	[UIView setAnimationDelegate:self];

	 //We are just setting the x value of our imageView to be the other side of the screen
	image1.frame = CGRectMake((areImagesOnLeft ? RIGHT_SIDE_X_POSITION : LEFT_SIDE_X_POSITION),
							image1.frame.origin.y,
							 image1.frame.size.width,
							 image1.frame.size.height);


	[UIView commitAnimations];
}

This is a simple animation block with the most important things to look at are the calls to setAnimationDidStopSelector and setAnimationDelegate. We are specifying with setAnimationDidStopSelector that when this animation completes we will call the selector specified and for this to work correctly we set the delegate to self. You will see that the specified selector simply performs a very similar animation where it calls another selector on its completion.

Summary Thats basically it. This is a good tool to add some animation style to your views. My example is pretty simple and not very practical but using some animation to have a view arrange itself and then firing a function to maybe present some information might be a good use for this.

Again here is the link to download the project: Project Download

I hope this is helpful to some of you out there. If you have any questions or comments feel free to email me or leave a comment on this post.

-Ryan