Flip and Rotate

Question

I have 2 views. I would like a card to flip and rotate along its axis to show the other view.

So when I click on view1, view1 should flip but flip in the sense that it rotates around the y-axis to show view 2.

I am using the FLIP directive in IOS, but that does not do the "rotate" that I am looking for:

[UIView transitionFromView:(self.displayingPrimary ? self.primaryView : self.secondaryView)
                    toView:(self.displayingPrimary ? self.secondaryView : self.primaryView)
                  duration: 2.0
                   options: (self.displayingPrimary ? UIViewAnimationOptionTransitionFlipFromLeft :
                             UIViewAnimationOptionTransitionFlipFromRight) | UIViewAnimationOptionShowHideTransitionViews


                completion:^(BOOL finished) {
                    if (finished) {
                        self.displayingPrimary = !self.displayingPrimary;
                    }
                }];

Answer 1

There are a couple of ways you can make one view flip to another using Quartz on iOS if you do not like the built in flip transformation. The following two code snippets both require you to #import <QuartzCore/QuartzCore.h> and also link against the QuartzCore framework. Note that both functions I wrote assume that both views are added as subviews with the same frame and one of them is hidden (setHidden:).

The first function will flip one view to another using 2D transformations. This is more efficient and all it really does is scale along the x axis. At high speeds, it looks pretty good, IMO.

+ (void)flipFromView1:(UIView*)v1 toView:(UIView*)v2 duration:(NSTimeInterval)duration completion:(void (^)(BOOL finished))completion
{
    duration = duration/2;

    [v2.layer setAffineTransform:CGAffineTransformMakeScale(0, 1)];
    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        [v1.layer setAffineTransform:CGAffineTransformMakeScale(0, 1)];
    } completion:^(BOOL finished){
        [v1 setHidden:YES];
        [v2 setHidden:NO];
    }];

    [UIView animateWithDuration:duration delay:duration options:UIViewAnimationOptionCurveEaseOut animations:^{
        [v2.layer setAffineTransform:CGAffineTransformMakeScale(1, 1)];
    } completion:completion];
}

The second function performs an actual 3D transformation. Note that if the views being rotated using this 3D transformation are over or under other subviews in 3D space then you could see those other views sticking through or getting hidden during this animation.

+ (void)flipFromView2:(UIView*)v1 toView:(UIView*)v2 duration:(NSTimeInterval)duration rToL:(BOOL)rToL completion:(void (^)(BOOL finished))completion
{
    duration = duration/2;

    v2.layer.transform = CATransform3DMakeRotation((rToL ? -1.57079633 : 1.57079633), 0, 1, 0);
    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
        v1.layer.transform = CATransform3DMakeRotation((rToL ? 1.57079633 : -1.57079633), 0, 1, 0);
    } completion:^(BOOL finished){
        [v1 setHidden:YES];
        [v2 setHidden:NO];
    }];

    [UIView animateWithDuration:duration delay:duration options:UIViewAnimationOptionCurveEaseOut animations:^{
        v2.layer.transform = CATransform3DMakeRotation(0, 0, 1, 0);
    } completion:completion];
}