Darkening UIView while flipping over using UIViewAnimationTransitionFlipFromRight

Question

I'm using a standard animation block to flip over from one view to another, like this:

[UIView beginAnimations:@"FlipAnimation" context:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:NO];
[UIView setAnimationBeginsFromCurrentState:NO];
[containerView exchangeSubviewAtIndex:1 withSubviewAtIndex:0];
[UIView commitAnimations];

During the animation's course, the "from" view darkens as it begins to flip over. Since I'm using nearly identical views on both sides which don't cover the whole view (it's meant to represent a physical card being flipped over), this looks absolutely horrible. Using [UIColor clearColor] as the backgroundColor property for every associated UIView didn't help one bit as transparent areas seem to get darkened as well.

Any ideas on how I could get rid of this darkening effect?

Answer 1

Seems you have to do the animation 'by hand', using Core Animation transforms. I divided the Animation in two parts. First I rotate 'viewOne' half the way with animation and 'viewTwo' half the way in the other direction without animation. When the first half of the animation is done, I do the rest in the delegate method. Yours parameters may vary :)

Skewing is courtesy of some other StackOverflow answer I found.

- (IBAction)flip:(id)sender
{
  UIView* viewOne = [self.view.subviews objectAtIndex:0];
  UIView* viewTwo = [self.view.subviews objectAtIndex:1];

  viewOne.hidden = YES;

  CATransform3D matrix = CATransform3DMakeRotation (M_PI / 2, 0.0, 1.0, 0.0);
  CATransform3D matrix2 = CATransform3DMakeRotation (-M_PI / 2 , 0.0, 1.0, 0.0);
  matrix = CATransform3DScale (matrix, 1.0, 0.975, 1.0);
  matrix.m34 = 1.0 / -500;

  matrix2 = CATransform3DScale (matrix2, 1.0, 0.975, 1.0);
  matrix2.m34 = 1.0 / -500;

  viewOne.layer.transform = matrix2;

  [UIView beginAnimations:@"FlipAnimation1" context:self];
  [UIView setAnimationDuration:1];
  [UIView setAnimationDelegate:self];
  [UIView setAnimationDidStopSelector:@selector(animationPartOneDone)];
  [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];

  viewTwo.layer.transform = matrix;

  [UIView commitAnimations];    
}

-(void)animationPartOneDone
{   
  UIView* viewOne = [self.view.subviews objectAtIndex:0];
  UIView* viewTwo = [self.view.subviews objectAtIndex:1];


  viewOne.hidden = NO;
  viewTwo.hidden = YES;

  CATransform3D matrix = CATransform3DMakeRotation (2 * M_PI, 0.0, 1.0, 0.0);

  matrix = CATransform3DScale (matrix, 1.0, 1.0, 1.0);

  [UIView beginAnimations:@"FlipAnimation2" context:self];
  [UIView setAnimationDuration:1];
  [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

  viewOne.layer.transform = matrix;

  [UIView commitAnimations];    

  [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

}