Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to implement an iPhone view transition animation with both flipping and scaling?

how can I implement the animation we see in the iPhone Music app's coverflow screen? when you click on a small view, it flips and scales up to another view? how can I do this? I can use core animation to flip and scale a view, but how can I do the transition to another view? thanks

like image 565
ross chen Avatar asked Nov 18 '09 11:11

ross chen


1 Answers

You need an UIView as Container for the two UIViews (frontside/backside) and then remove/add these from/to the container as subviews while doing the animations in between:

UIView *flipContainer;
UIView *frontSide;
UIView *backSide;
  //...
-(void)turnUp
{
  [backSide removeFromSuperview];
  [UIView beginAnimations:nil context:NULL];
  [UIView setAnimationDuration:1.0];
  [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:flipContainer cache:YES];
  [UIView setAnimationDuration:1.0];
  CGAffineTransform transform = CGAffineTransformMakeScale(1.2, 1.2);
  flipContainer.transform = transform;
  [UIView commitAnimations];
  [flipContainer addSubview:frontSide];
}
-(void)turnDown
{
  [frontSide removeFromSuperview];
  [UIView beginAnimations:nil context:NULL];
  [UIView setAnimationDuration:1.0];
  [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:flipContainer cache:YES];
  [UIView setAnimationDuration:1.0];
  CGAffineTransform transform = CGAffineTransformMakeScale(1, 1);
  flipContainer.transform = transform;
  [UIView commitAnimations];
  [flipContainer addSubview:backSide];
}
like image 88
Kai Huppmann Avatar answered Oct 06 '22 01:10

Kai Huppmann