Core animation animating the layer to flip horizon

问题:

I have two views and I want to switch between the two view using core animation, animating the layer of each of the views. The animation I want is like the one provided by UIViewAnimationOptionTransitionFlipFromLeft but I could not manage to do it. I could make the layer rotate 180 and then when the animation stop I transition to the next view. How can this be done?

I used the code as below:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
self.view.layer.zPosition = 100;
CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
[animation setToValue:[NSValue valueWithCATransform3D:transform]];
[animation setDuration:.5];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[animation setFillMode:kCAFillModeForwards];
[animation setRemovedOnCompletion:YES];
[animation setDelegate:self];

[self.view.layer addAnimation:animation forKey:@"test"];

and in the delegate I transition to the next view. But, this does not make much sense and the animation is not as lively as provided by the default animation. how can this be achieved?

回答1:

How to make it look like a 3D rotation

Your rotation doesn't look like it happens in 3D space because there is no perspective to your transform. Change the m34 value of the transform into something small like 1.0/800.0 and you should see it rotate with perspective.

CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
transform.m34 = 1.0/800.0;
[animation setToValue:[NSValue valueWithCATransform3D:transform]];

That value (third column, forth row) of the 3D transform controls the perspective of the transform. You can read more about 3D projection on Wikipedia if you want to know more about how it works.

How to flip two views as if they were to sides of a card

To have it seem like the two views are two sides of the same view you should add them rotate the back side π degrees and change the layer's doubleSided property to NO for both layers. Now they won't be visible when facing away from you. As you apply the rotation to both the front and back layer they will change which layer is visible. Note: rotate the front to π degrees and the back to 2π so that it completes it rotation and faces you.

回答2:

you could use

    [UIView transitionFromView:aView
                    toView:bView
                  duration:0.3
                   options:UIViewAnimationOptionTransitionFlipFromLeft
                completion:^(BOOL finished) {
                }
 ];

i find you want to have both views within the same super-view else things get a bit messy.