Page flip transition

Question

Hi, I was wondering how to turn this code into a page transition. I want to switch Xibs with this page flipping affect. Thanks!

.h:

    #import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>

@interface PageOpenAnimationTutorialViewController : UIViewController {

    IBOutlet UIButton *openPageButton;
    IBOutlet UIImageView *pageImage;

}

- (IBAction) openPage:(id)sender;
- (void) pageOpenView:(UIView *)viewToOpen duration:(NSTimeInterval)duration;

@end

.m:

    - (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}


- (void)dealloc {
    [super dealloc];
}

- (IBAction) openPage:(id)sender {
    [self pageOpenView:pageImage duration:1.0f];
}

- (void) pageOpenView:(UIView *)viewToOpen duration:(NSTimeInterval)duration {
    // Remove existing animations before stating new animation
    [viewToOpen.layer removeAllAnimations];

    // Make sure view is visible
    viewToOpen.hidden = NO;

    // disable the view so it’s not doing anythign while animating
    viewToOpen.userInteractionEnabled = NO;
    // Set the CALayer anchorPoint to the left edge and
    // translate the button to account for the new
    // anchorPoint. In case you want to reuse the animation
    // for this button, we only do the translation and
    // anchor point setting once.
    if (viewToOpen.layer.anchorPoint.x != 0.0f) {
        viewToOpen.layer.anchorPoint = CGPointMake(0.0f, 0.5f);
        viewToOpen.center = CGPointMake(viewToOpen.center.x - viewToOpen.bounds.size.width/2.0f, viewToOpen.center.y);
    }
    // create an animation to hold the page turning
    CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    transformAnimation.removedOnCompletion = NO;
    transformAnimation.duration = duration;
    transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    // start the animation from the current state
    transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    // this is the basic rotation by 90 degree along the y-axis
    CATransform3D endTransform = CATransform3DMakeRotation(3.141f/2.0f,
                                                           0.0f,
                                                           -1.0f,
                                                           0.0f);
    // these values control the 3D projection outlook
    endTransform.m34 = 0.001f;
    endTransform.m14 = -0.0015f;
    transformAnimation.toValue = [NSValue valueWithCATransform3D:endTransform];
    // Create an animation group to hold the rotation
    CAAnimationGroup *theGroup = [CAAnimationGroup animation];

    // Set self as the delegate to receive notification when the animation finishes
    theGroup.delegate = self;
    theGroup.duration = duration;
    // CAAnimation-objects support arbitrary Key-Value pairs, we add the UIView tag
    // to identify the animation later when it finishes
    [theGroup setValue:[NSNumber numberWithInt:viewToOpen.tag] forKey:@"viewToOpenTag"];
    // Here you could add other animations to the array
    theGroup.animations = [NSArray arrayWithObjects:transformAnimation, nil];
    theGroup.removedOnCompletion = NO;
    // Add the animation group to the layer
    [viewToOpen.layer addAnimation:theGroup forKey:@"flipViewOpen"];
}

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    // Get the tag from the animation, we use it to find the
    // animated UIView
    NSNumber *tag = [theAnimation valueForKey:@"viewToOpenTag"];
    // Find the UIView with the tag and do what you want
    // This only searches the first level subviews
    for (UIView *subview in self.view.subviews) {
        if (subview.tag == [tag intValue]) {
            // Code for what's needed to happen after
            // the animation finishes goes here.
            if (flag) {
                // Now we just hide the animated view since
                // animation.removedOnCompletion is not working
                // in animation groups. Hiding the view prevents it
                // from returning to the original state and showing.
                subview.hidden = YES;
            }
        }
    }
}

@end

Answer 1

Hello, You can check out, how to implement an iPhone view transition animation with both flipping and scaling? kai1968 is gave a really good answer.

But you should make small changes in your code, and also you will be need to know that how to load view with xib, you can take a look How to load a View using a nib file created with Interface Builder.

Hope this helps.