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

Question

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

Answer 1

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];
}

Answer 2

how to do that in Android

Answer 3

I'm trying the exact code you are doing - I get a zoom effect but no turn over. The only difference is that right before the turnUp code I add the flipContainer (with back showing) so then it can be flipped over.

// construct animation container
self.flipContainer = [[FlipContainer alloc] init];
[self.flipContainer.view setFrame:CGRectMake(clickedSquareX, clickedSquareY, 200, 200)];
[self.flipContainer.view addSubview:self.backside.view];
// add animation container
[self.myParentView.view addSubview:self.flipContainer.view];
// PROCEED to your turnUp code

The reason I'm doing this is I have a bunch of images in a horizontal UIScrollView and so to 'simulate' a 200x200 image flipping over and zooming to show detail I add my flipContainer with the backside showing the exact image over the exact spot of the pressed image. It should work shouldn't it? A bit confusing to me is the first line of your turnUp code you do:

[backSide removeFromSuperview];

..which would remove the view I just added.

I'm not sure if this is the right spot to put this question in - sorry if it isn't!