Objective-C – UIStoryboard segue custom transition

UIStoryboardSegue object is responsible for performing the visual transition between two view controllers. In addition, segue objects are used to prepare for the transition from one view controller to another. Segue objects contain information about the view controllers involved in a transition. When a segue is triggered, but before the visual transition occurs, the storyboard runtime calls the current view controller’s prepareForSegue:sender: method so that it can pass any needed data to the view controller that is about to be displayed.

Subclassing notes

You can subclass UIStoryboardSegue in situations where you want to provide a custom transition between view controllers in your application. To use your custom segue, create a segue line between the appropriate view controllers in Interface Builder and set its type to Custom in the inspector; you must also specify the class name of the segue to use in the inspector.

Ref: https://developer.apple.com/library/ios/documentation/uikit/reference/UIStoryboardS egue_Class/Reference/Reference.html

Subclassing UIStoryboardSegue:

Create a subclass of UIStoryBoardSegue and override the perform method.
In the perform method, do your custom animation. Once the animation is complete, push or present your destination view controller.

// a simple UIStoryboardSegue subclass
@interface APCustomSegue : UIStoryboardSegue

@implementation APCustomSegue

// method to override
- (void) perform
  UIViewController *src  = (UIViewController *)self.sourceViewController;
  UIViewController *dest = (UIViewController *)self.destinationViewController;
  CGRect f = src.view.frame;
  CGRect originalSourceRect = src.view.frame;
  f.origin.y = f.size.height;
  [UIView animateWithDuration:0.3 animations:^
     src.view.frame = f;
  } completion:^(BOOL finished){
     src.view.alpha = 0;
     dest.view.frame = f;
     dest.view.alpha = 0.0f;
     [[src.view superview] addSubview:dest.view];

     [UIView animateWithDuration:0.3 animations:^
 dest.view.frame = originalSourceRect;
 dest.view.alpha = 1.0f;
     } completion:^(BOOL finished) {
 [dest.view removeFromSuperview];
 src.view.alpha = 1.0f;
 [src.navigationController pushViewController:dest animated:NO];


Your segue has now a custom animation. You can play now!

Enjoy animating!

Alberto Pasca
Latest posts by Alberto Pasca (see all)