How to animate image in tableview to extend and open another view controller simultaneously?

Question

I'm making a messenger app and I want the user to click on image in my tableview and it should extend to full screen and show different controls on navigation bar.

How do I go about it?

I thought I can take the same image, put UIImageView on top of original cell image and animate it to full screen. But how do I go about presenting different controller without blinks, delays, and animations?

This is done in many messaging applications.

Answer 1

Use a custom transition, to extend the image view from the initial preview size to full screen. When called, return a transition delegate from transitioningDelegate, which in turn should return an animation controller from animationControllerForPresentedController:presentingController:sourceController:. This animation controller will be responsible for the animation that will be performed when presentViewController:animated:completion: is called.

In your animation controller, implement and in it, create the animation:

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    MyChatViewController* fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    [[transitionContext containerView] addSubview:toViewController.view];
    toViewController.view.frame = [transitionContext.containerView convertRect:fromViewController.imageViewToTransitionFrom.frame fromView:fromViewController.imageViewToTransitionFrom];

    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        toViewController.view.frame = [transitionContext finalFrameForViewController:toViewController];
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}

Here, MyChatViewController is your chat view controller and imageViewToTransitionFrom holds the image view you wish to transition from.

If you need to push a view controller instead of present it (like WhatsApp does it), there are analogous methods to perform the custom push animation.

You can perform a dismiss/pop animation in a similar manner, or use the default system one.

Read here about custom view controller transitions in iOS7.