iPhone: How to commit two animations after another

Question

This is an absolute beginner's question (sorry), but I was wondering how to commit one animations and once it has ended to start another one. Imagine having an image moved from x=0 to x=300. Then you want to do animate the same image again, but this time from x=300 to x=330 so that it disappears from the screen.

The following code will only do the animation from x=300 to x=330 and will not commit the animation x=0 to x=300. I'm sure I don't get the concept of commitAnnimation and that this is obvious, but how would I do two animations after one another?

I know I could move the image straightaway to 330, but I don't want this as I need the first animation (x 0 - 300) to be in sync with another animation.

Here is my (wrong) code:

[UIView beginAnimations:@"shadowMove" context:nil]; // Begin animation
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

[imageView setFrame:CGRectOffset([imageView frame], 300, 0)]; 

[UIView commitAnimations]; // End animations


// Second Animation


[UIView beginAnimations:@"shadowMoveRestAway" context:nil]; // Begin animation
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

[imageView setFrame:CGRectOffset([imageView frame], 330, 0)]; // Move imageView off screen

[UIView commitAnimations]; // End animations

Answer 1

Use the delegate method

[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

to start something else when the first animation has finished. So put what you want to do next inside the animationDidStop:finished:context method, remember that the iphone is an event driven environment so linear code like you have above will simply kick off each animation at almost the same time.

EDIT:

I forgot to add that you need to set the animation delegate as well otherwise you won't get the event when the first one stops - see below;

Here's a full version of your code with the change - I'm using the abbreviated animationDidStop delegate as that's easier to understand and fine for this example.

[UIView beginAnimations:@"shadowMove" context:nil]; // Begin animation
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(myFirstAnimationDidStop)];
[imageView setFrame:CGRectOffset([imageView frame], 300, 0)]; 
[UIView commitAnimations]; // End animations

Then you just need a new method like this;

-(void) myFirstAnimationDidStop {
// Second Animation

[UIView beginAnimations:@"shadowMoveRestAway" context:nil]; 
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[imageView setFrame:CGRectOffset([imageView frame], 330, 0)];
[UIView commitAnimations]; 
}

And for completeness, in your interface (.h) file you should add;

-(void) myFirstAnimationDidStop;

@selector is easy, it's just a way of pointing to another method - hopefully this example clarifies that.