Custom Segue Animation left to right Using CATransition

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 Let’s 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 {
    
   UIViewController *sourceViewController = (UIViewController*)[self sourceViewController];
   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.

About Zakir Hyder

This entry was written by .

05. July 2012 by Zakir Hyder
Categories: iOS | Tags: , , , , , , | Comments

Comments

  1. […] Custom Segue Animation left to right Using CATransition 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 […] […]

  2. Shahriar says:

    hmmmm

  3. zav says:

    “So Lets create an single view application.”

    That should be “let’s”. “Let’s” is a contraction of “let us”.

    FYI.

  4. Zakir Hyder says:

    Thanks zav :). If you see any more errors please let me know.

  5. Xi says:

    Why are you using the __block storage here? I don’t see any use of blocks in your -perform method.

  6. Zakir Hyder says:

    Yes you are right. __block is removed.