A custom UIViewController Transition with animations

Logan Sease October 9, 2014 Development Tips No Comments

Warning: count(): Parameter must be an array or an object that implements Countable in /home/customer/www/logansease.com/public_html/iparty/wp-content/themes/grizzly-theme/base/shortcodes/fix.php on line 36

Here is a good example of neat looking custom, animated transition in iOS 7 that allows us to animate specific objects from one view to transition into the next view. It took me a little bit to find the best way to do this, but it isn’t too tough!

@implementation HomeController
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    
    if([segue.identifier isEqualToString:@"search"])
    {
        //set the delegate for the navigation controller so that we will perform our custom animation
        UIViewController *fromVC = [segue sourceViewController];
        UINavigationController *navVC = [fromVC navigationController];
        navVC.delegate = self;
    }
}

#pragma mark animation methods

// Report who is in charge of the animation
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                  animationControllerForOperation:(UINavigationControllerOperation)operation
                                               fromViewController:(UIViewController *)fromVC
                                                 toViewController:(UIViewController *)toVC
{
    return self;
}

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
    return .5;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    //get the container view that will hold the transition
    UIView *container = transitionContext.containerView;
    
    //get the view we are going to and take a snapshot of it and add it to the view as invisible
    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *toView = toVC.view;
    UIView *snapshot = [toView snapshotViewAfterScreenUpdates:YES];
    snapshot.alpha = 0.0f;
    container.backgroundColor = [UIColor whiteColor];
    [container addSubview:snapshot];
    
    //add the text box we are going to animate
    UIView * moveView = [self.searchView snapshotViewAfterScreenUpdates:NO];
    [container addSubview:moveView];
    moveView.frame = self.searchView.frame;
    
    //fade out the current view
    [UIView animateWithDuration:.2 animations:^{
        self.view.alpha = 0.0f;
    } completion:^(BOOL finished) {
    }];
    
    //move the search bar up to the top, fading it out and fade the new view in
    [UIView animateWithDuration:.5 animations:^{
        moveView.frame = CGRectMake(moveView.frame.origin.x,0, moveView.frame.size.width, moveView.frame.size.height);
        moveView.alpha = 0.0f;
    }];
    
    //fade the next VCs view in and reset after completion.
    //add the transition view to our resulting container and complete the transition
    //also clear the nav delegate so we won't use this to transition any more.
    [UIView animateWithDuration:.25 delay:0.25f options:0 animations:^{
        snapshot.alpha = 1.0f;
    } completion:^(BOOL finished) {
        [snapshot removeFromSuperview];
        toVC.navigationController.delegate = nil;
        [transitionContext completeTransition:YES];
        [container addSubview:toView];
        self.view.alpha = 1.0f;
    }];
}