UIViewController half screen “drawer slide” animation

Question

I am trying to have a UIViewController that appears with a "slide" animation from the right. Not like a Push segue, not like the Facebook app. I want the new ViewController to slide ON TOP of the current one (not push it away), but only cover PART of the screen, leaving the other part showing the first ViewController.

What I have tried: The closest that I have gotten is by creating a custom segue with the following:

- (void)perform
{
    __block UIViewController *src = (UIViewController *) self.sourceViewController;
    __block UIViewController *dst = (UIViewController *) self.destinationViewController;

    CATransition* transition = [CATransition animation];
    transition.duration = .50;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.type = kCATransitionMoveIn;
    transition.subtype = kCATransitionFromRight;

    [src.navigationController.view.layer addAnimation:transition forKey:@"SwitchToView1"];
    [src.navigationController pushViewController:dst animated:NO];
}

This achieves the animation that I am going for, but it covers the entire first ViewController. How would I make it stop at a certain point and not cover the entire thing?

I am using Storyboards, and I this is my first time trying any sort of new animation.

Answer 1

You can try doing it in your source view controller, and changing the frame for your destnation (the x axis) something like:

- (void) perform {    
    UIViewController *dst = (UIViewController *) self.destinationViewController;

    [dst.view setFrame:CGRectMake(160, 0, YOUR_DST_WIDTH, YOUR_DST_HEIGHT)];

    //your animation stuff...

    [self addChildViewController:dst]; 
    [self.view addSubview:dst.view]; 
    [dst didMoveToParentViewController:self]; 
}

And that should do it!

Let me know if it didn't...

UPDATE!:

@CaptJak Hey, sorry that didn't work out for you.. I wrote the following code, and it works without any problems here.. I linked it to a button click.. try it and let me know! (PS: I added animations too!).

ViewController *tlc = [self.storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
[tlc.view setFrame:CGRectMake(-320, 0, self.view.frame.size.width, self.view.frame.size.height)];

[self addChildViewController:tlc];
[self.view addSubview:tlc.view];
[tlc didMoveToParentViewController:self];

[UIView animateWithDuration:0.3 animations:^{
    [tlc.view setFrame:CGRectMake(-160, 0, self.view.frame.size.width, self.view.frame.size.height)];
}];

Answer 2

Using the answer given by Albara, I was able to also create a segue with the same animation. The custom segue is as follows:

- (void)perform
{
    UIViewController *src = (UIViewController *)self.sourceViewController;
    UIViewController *dst = (UIViewController *)self.destinationViewController;

    [dst.view setFrame:CGRectMake(380, 0, dst.view.frame.size.width, dst.view.frame.size.height)];

    [src addChildViewController:dst];
    [src.view addSubview:dst.view];
    [dst didMoveToParentViewController:src];

    [UIView animateWithDuration:0.5 animations:^{
        [dst.view setFrame:CGRectMake(300, 0, src.view.frame.size.width, src.view.frame.size.height)];
    }];

}

Just a matter of renaming, really.

Answer 3

I just created NDOverlayViewController to do something like this. Actually it can overlay/slide one view controller over another from any edge with variable offset, extent and animation options. I created it as an experiment but maybe it will be helpful to somebody?