UIView vertical flip animation
Just write your own method for the flip using Core Animation Transforms.
- (void)verticalFlip{
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0);
} completion:^{
// code to be executed when flip is completed
}];
}
Make sure you have the Core Animation libraries/frameworks added and included and also have included math.h
if you want to use the M_PI
notation.
EDIT:
To have it essentially "change" the view when it's halfway flipped do something like this:
- (void)verticalFlip{
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.layer.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
} completion:^{
while ([yourView.subviews count] > 0)
[[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
// Add your new views here
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
} completion:^{
// Flip completion code here
}];
}];
}
This could also work:
- (void)verticalFlip{
// Do the first half of the flip
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.layer.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
} completion:^{
while ([yourView.subviews count] > 0)
[[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
// Add your new views here
}];
// After a delay equal to the duration+delay of the first half of the flip, complete the flip
[UIView animateWithDuration:someDuration delay:durationOfFirstAnimation animations:^{
yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
} completion:^{
// Flip completion code here
}];
}
Cheers.
UIViewAnimationOptionTransitionFlipFromTop is easy to use, but we can not create an interactive transition using UIViewAnimationOptionTransitionFlipFromTop. We need change layer’s transform to create an interactive transition.
Just create a transform using CATransform3DMakeRotation is not enough, no light effect, no perspective. I write an sample to add these effect. You can change it to an interactive transition easily.
Demo:
Sample code:
CALayer *sideALayer = sideAView.layer;
CALayer *sideBLayer = sideBView.layer;
CALayer *containerLayer = containerView.layer;
sideALayer.opacity = 1;
sideBLayer.opacity = 0;
sideBLayer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
containerLayer.transform = CATransform3DIdentity;
CATransform3D perspectiveTransform = CATransform3DIdentity;
perspectiveTransform.m34 = -1.0 / containerViewWidth;
[UIView animateKeyframesWithDuration:1 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{
sideALayer.opacity = 0;
containerLayer.transform = CATransform3DConcat(perspectiveTransform,CATransform3DMakeRotation(M_PI_2, 0, 1, 0));
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
sideBLayer.opacity = 1;
containerLayer.transform = CATransform3DConcat(perspectiveTransform, CATransform3DMakeRotation(M_PI, 0, 1, 0));
}];
} completion:nil];
sideAView and sideBView are subviews of containerView.
The containerView is set a black background.
The code from Brenton didn't work for me so I did a little more digging through the apple docs and found this piece of code for an horizontal flip:
- (IBAction)toggleMainViews:(id)sender {
[UIView transitionFromView:(displayingPrimary ? primaryView : secondaryView)
toView:(displayingPrimary ? secondaryView : primaryView)
duration:1.0
options:(displayingPrimary ?
UIViewAnimationOptionTransitionFlipFromRight :
UIViewAnimationOptionTransitionFlipFromLeft)
completion:^(BOOL finished) {
if (finished) {
displayingPrimary = !displayingPrimary;
}
}
];
}
You can do a vertical flip by changing the options from UIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeft
to UIViewAnimationOptionTransitionFlipFromTop : UIViewAnimationOptionTransitionFlipFromBottom
.
Worked like a charm.
As of iOS 5.0, there's no need to write your own Core Animation transformation to do vertical flips. Just use UIKit's UIViewAnimationOptionTransitionFlipFromTop
and UIViewAnimationOptionTransitionFlipFromBottom
transitions, and all this stuff becomes a single method call.
These behave analagously to UIViewAnimationOptionTransitionFlipFromLeft
and UIViewAnimationOptionTransitionFlipFromRight
(which have been around since iOS 2.0).
Example usage:
[UIView transitionFromView:viewToReplace
toView:replacementView
duration:1
options:UIViewAnimationOptionTransitionFlipFromBottom
completion:nil];
The above code will vertically flip the superview of viewToReplace
. At the halfway point in the animation, at the instant when the superview is perpendicular to the screen and thus invisible, viewToReplace
gets replaced by replacementView
.
It's that easy.