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

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.