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?
you could use
i find you want to have both views within the same super-view else things get a bit messy.
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.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.