UIView vertical flip animation
I have an iOS UIView with UIViewAnimationTransitionFlipFromRight
. I need it to flip vertically though. The page curl transition won't cut it. I assume this will require something custom.
Any ideas?
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.
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.