UIView darkening when scrolling using UIViewAnimationTransitionFlipFromRight

Question

I use a standard animation block to go from one view to another, for example:

[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 animated course, the “from” view darkens when it begins to roll over. Since I use almost the same views on both sides, which do not cover the whole view (this means that the physical map turned upside down), it looks absolutely terrible. Using [UIColor clearColor] as the backgroundColor property for each associated UIView did not help a single bit, since the transparent areas will also darken.

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

Answer 1

It seems you need to do the animation manually using the Core Animation transforms. I divided the animation into two parts. First, I rotate “viewOne” halfway with the animation and “viewTwo” halfway in the other direction without animation. When the first half of the animation is done, I do the rest in the delegate method. Your options may vary :)

Skew is a courtesy of some other StackOverflow answer 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]; }