How to animate view after using UIModalPresentationCurrentContext

Question

I was looking around for a solution on how to wrap a view in a dialog in iOS when I came across this post, which has this line:

vc.modalPresentationStyle = UIModalPresentationCurrentContext;

It solves my problem of basically creating/imitating a dialog but it does not animate upon transition as mentioned in the post. So what is the simplest way to get the slide up animation?

ps.I would ask this as a sub question in that post but I do not have 50 rep comment :(

Answer 1

Well, once your view has been shown, you can do pretty much any animation you want in it. You can do a simple [UIView animateWithDuration] kind of deal, but I would personally use a CATransition for this, it's relatively simple.

The Way of the QuartzCore

First, I'm gonna assume that the view you're presenting is transparent, and there's another view inside that behaves as the dialog. The view controller that will be presented, let's call it PresentedViewController and holds the dialog property for the view within.

PresentedViewController.m

(Needs to be link against QuartzCore.h)

#import <QuartzCore/QuartzCore.h>

@implementation PresentedViewController

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    if (animated)
    {
        CATransition *slide = [CATransition animation];

        slide.type = kCATransitionPush;
        slide.subtype = kCATransitionFromTop;
        slide.duration = 0.4;
        slide.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

        slide.removedOnCompletion = YES;

        [self.dialog.layer addAnimation:slide forKey:@"slidein"];
    }
}

Getting Fancy

The good thing about this, is that you can create your own custom animations, and play around with other properties.

CABasicAnimation *animations = [CABasicAnimation animationWithKeyPath:@"transform"];

CATransform3D transform;

// Take outside the screen
transform = CATransform3DMakeTranslation(0, self.view.bounds.size.height, 0);

// Rotate it
transform = CATransform3DRotate(transform, M_PI_4, 0, 0, 1);

animations.fromValue    = [NSValue valueWithCATransform3D:transform];
animations.toValue      = [NSValue valueWithCATransform3D:CATransform3DIdentity];
animations.duration     = 0.4;
animations.fillMode     = kCAFillModeForwards;
animations.removedOnCompletion = YES;
animations.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0 :0.0 :0 :1];

[self.dialog.layer addAnimation:animations forKey:@"slidein"];

Here, the view will be moved outside of screen by the translation, then rotated, and it will slide in, back to its original transform. I also modified the timing function to provide a smoother curve.

Consider that I just scraped the surface of what's possible with CoreAnimation, I've been on this road for three years now, and I've grown to like CAAnimation for all the things it does.

Storyboard pro-tip: You can wrap this up very nicely if you build your own custom UIStoryboardSegue subclass.