UIView vertical flip animation

Question

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 wil

Answer 1

To flip into UIView:

  -(void) goToSeconVC
 {
  SecondVC *secondVCObj = [[SecondVC alloc] init];
  [UIView beginAnimation: @”View Flip” context: nil];
  [UIView setAnimationDuration: 1.0];
  [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
  [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView: self.navigationController.view cache: NO];
  [sef.navigationController pushViewController: seconVCObj animated: YES];
  [UIView commitAnimation];
 }
**To flip into a view controller:**
          viewController.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
         [self presentViewController:viewController animated:YES completion:nil];
**To flip out of it:**

[self dismissViewControllerAnimated:YES completion:nil];

Answer 2

Swift 5 version of @C0mrade

func flipTransition (with view1: UIView, view2: UIView, isReverse: Bool = false) {
    var transitionOptions = UIView.AnimationOptions()
    transitionOptions = isReverse ? [.transitionFlipFromLeft] : [.transitionFlipFromRight]

    UIView.transition(with: view1, duration: 1.5, options: transitionOptions, animations: {
        view1.isHidden = true
    })

    UIView.transition(with: view2, duration: 1.5, options: transitionOptions, animations: {
        view2.isHidden = false
    })
}

Answer 3

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.75];
// checks to see if the view is attached
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight
                       forView:flipLabel
                         cache:YES];

 flipLabel.backgroundColor = [UIColor yellowColor];



[UIView commitAnimations];

You can make any modification which you want while flipping view, Here I have change the background color

Answer 4

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.

Answer 5

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.

Answer 6

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.