Custom Segue Animation left to right Using CATransition

Published on : July 5, 2012

Author: Cyber Netikz

Category: Our Blog

Storyboarding is very cool feature. When I started developing iOS apps I some how felt at home because of my Visual Basic background. Any way using Segue you can build an app and going from one view to another view and the animation is handel by iOS. The best thing is you subclass the Segue and control the animation yourself.

So Lets create an single view application. Then add new view controller. We can add the navigation controller by selecting Editor > Embed In >Navigation Controller. Your storyboard should look like this

Now we will create our custom segue class. We will first create a Objective-c Class.

We will name our class ZHCustomSegue

Then we will change NSObject to UIStoryboardSegue in ZHCustomSegue.h

To use CATransition we have to add QuartzCore framework to our project

Now we go to our Storyboard and change Segue style to custom and put ZHCustomSegue in segue class.

Now we will Override the “perform” method to achieve what we want. BTW remember to add QuartzCore.h to your ZHCustomSegue.m.


#import "ZHCustomSegue.h"
#import "QuartzCore/QuartzCore.h"

@implementation ZHCustomSegue

-(void)perform {

    __block UIViewController *sourceViewController = (UIViewController*)[self sourceViewController];
    __block UIViewController *destinationController = (UIViewController*)[self destinationViewController];

    CATransition* transition = [CATransition animation];
    transition.duration = .25;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.type = kCATransitionPush; //kCATransitionMoveIn; //, kCATransitionPush, kCATransitionReveal, kCATransitionFade
    transition.subtype = kCATransitionFromLeft; //kCATransitionFromLeft, kCATransitionFromRight, kCATransitionFromTop, kCATransitionFromBottom

    [sourceViewController.navigationController.view.layer addAnimation:transition
                                                                forKey:kCATransition];

    [sourceViewController.navigationController pushViewController:destinationController animated:NO];

}
@end

As you can see there are multiple type and subtype of animation available here. You can download the source code from HERE.