views:

50628

answers:

3

What is considered best practice for animating view transitions on the iPhone?

For example, the ViewTransitions sample project from apple uses code like:

CATransition *applicationLoadViewIn = [CATransition animation];
[applicationLoadViewIn setDuration:1];
[applicationLoadViewIn setType:kCATransitionReveal];
[applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[[myview layer] addAnimation:applicationLoadViewIn forKey:kCATransitionReveal];

but there are also code snippets floating around the net that look like this:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];
[myview removeFromSuperview];
[UIView commitAnimations];

What is the best approach??? If you could provide a snippet as well it'd be much appreciated.

NOTE: I've been unable to get the second approach to work correctly.

+20  A: 

The difference seems to be the amount of control you need over the animation.

The CATransition approach gives you more control and therefore more things to set up, eg. the timing function. Being an object, you can store it for later, refactor to point all your animations at it to reduce duplicated code, etc.

The UIView class methods are convenience methods for common animations, but are more limited than CATransition. For example, there are only four possible transition types (flip left, flip right, curl up, curl down). If you wanted to do a fade in, you'd have to either dig down to CATransition's fade transition, or set up an explicit animation of your UIView's alpha.

Note that CATransition on Mac OS X will let you specify an arbitrary CoreImage filter to use as a transition, but as it stands now you can't do this on the iPhone, which lacks CoreImage.

Ryan McCuaig
+20  A: 

I have been using the latter for a lot of nice lightweight animations. You can use it crossfade two views, or fade one in in front of another, or fade it out. You can shoot a view over another like a banner, you can make a view stretch or shrink... I'm getting a lot of mileage out of beginAnimation/commitAnimations.

Don't think that all you can do is:

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];

Here is a sample:

[UIView beginAnimations:nil context:NULL]; {
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:1.0];
 [UIView setAnimationDelegate:self];
 if (movingViewIn) {
// after the animation is over, call afterAnimationProceedWithGame
//  to start the game
  [UIView setAnimationDidStopSelector:@selector(afterAnimationProceedWithGame)];

//  [UIView setAnimationRepeatCount:5.0]; // don't forget you can repeat an animation
//  [UIView setAnimationDelay:0.50];
//  [UIView setAnimationRepeatAutoreverses:YES];

  gameView.alpha = 1.0;
  topGameView.alpha = 1.0;
  viewrect1.origin.y = selfrect.size.height - (viewrect1.size.height);
  viewrect2.origin.y = -20;

  topGameView.alpha = 1.0;
 }
 else {
 // call putBackStatusBar after animation to restore the state after this animation
  [UIView setAnimationDidStopSelector:@selector(putBackStatusBar)];
  gameView.alpha = 0.0;
  topGameView.alpha = 0.0;
 }
 [gameView setFrame:viewrect1];
 [topGameView setFrame:viewrect2];

} [UIView commitAnimations];

As you can see, you can play with alpha, frames, and even sizes of a view. Play around. You may be surprised with its capabilities.

mahboudz
This is really helpful, but when I do a curlup animation for example, as soon as the curl goes up a little bit, you can already see the view behind it, which is actually the view its animating currently.Just removing the view after commit doesn't let the animation finish...How do you "wedge in" a new view to appear behind something like a curl animation?
Jasconius
Apple suggests a container view. I use my blank rootViewController. You could, possibly use your mainwindow too, but I haven't done that. I think if you look at Xcode's iPhone utility Project template you can see this. (I'm not at my computer now, but you want the Xcode template that has one main view and a flip view.)
mahboudz
+2  A: 

From UIView reference:

Use of this method is discouraged in iPhone OS 4.0 and later. You should use the block-based animation methods instead.

Rafael Vega
thanks for updating this rafael.
Keith Fitzgerald
So.. to be clear, that means use the first approach (CATransition), not the second?
Steve N
Yes, it is the first approach (CATransition).
kuroutadori