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

See this answer: http://stackoverflow.com/questions/5511514/custom-transition-between-two-uiviews/8931492#8931492 — aoakenfo, Jan 19 '12 at 18:50
I answered a similar question here (with code) : http://stackoverflow.com/questions/19171918/how-can-i-flip-and-enlarge-a-uiview-it-at-the-same-time-like-ios-7-ipad-app-stor — Former Gaucho, Mar 09 '14 at 19:07

Kai Huppmann · Accepted Answer · 2009-11-18T12:54:23.403

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

Ha! You invoked `+[UIView setAnimationDuration:]` twice! – Jacob Relkin Jan 10 '13 at 10:20 — Jacob Relkin, Jan 10 '13 at 10:20

score 0 · Answer 2 · answered Jul 13 '10 at 08:12

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!

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

2 Answers2

Linked