2

I have a UICollectionView in which each item has a UIImage. When tapping an item, another View Controller gets pushed on the navigation stack. How can I make this so that the UIImage gets passed from the original view controller to the new view controller via an interactive & animated transition? Sort of like the image zooms in from the original view controller's cell item into the new view controller.

I am looking for someway for it to be interactive. Like for example when I tap on the image on the collection view, it zooms in to the new view controller where that image is full screen. However I also want to be able to dismiss this by maybe pinching the image smaller so it goes back to the previous view controller. The current Photos app shows this very well. That's exactly the type of behavior I want.

The new uber app seems to use this in great way on how you can drag things around interactively + animated.

EDIT: I am not looking for someone to spoon feed me the code - I am looking for more general guidelines on how to achieve this in the best possible way. Some way for me to be able to control the entire transition interactively.

sudoExclaimationExclaimation
  • 7,992
  • 10
  • 47
  • 105
  • The answer to this question would become a tutorial, this is not a straigtforward one-liner task. http://stackoverflow.com/help/on-topic Also regarding your "interactive & animated transition", that is a BROAD description of what you want to achieve. "Animation" and "Interactive" could be anything. However Even if detailing what you want to achieve wont make any difference. –  Feb 25 '17 at 21:52
  • @Sneak I understand my question might be a bit too broad. I am not looking for someone to spoon feed me the code - I am looking for more general guidelines on how to achieve this in the best possible way. Some way for me to be able to control the entire transition interactively. The example "Sort of like the image zooms in from the original view controller's cell item into the new view controller." should make it specific enough. – sudoExclaimationExclaimation Feb 25 '17 at 22:57
  • 1
    Check this out : https://github.com/recruit-mp/RMPZoomTransitionAnimator –  Feb 25 '17 at 23:09
  • 1
    Do you mean like the kind of thing I show here? http://stackoverflow.com/a/33179604/341994 – matt Feb 25 '17 at 23:14
  • @matt your answer was the very first thing which came on google when I was looking for this. Only problem is that your method is animated but not interactive. I am looking for someway for it to be interactive. Like for example when I tap on the image on the collection view, it zooms in to the new view controller where that image is full screen. However I also want to be able to dismiss this by maybe pinching the image smaller so it goes back to the previous view controller. The current Photos app shows this very well. That's exactly the type of behavior I want. – sudoExclaimationExclaimation Feb 26 '17 at 06:58
  • So we are talking about popping a pushed view controller by an interactive pinch gesture? So what part of that is the hard part for you? Do you understand how to do an interactive pop view controller animation in the first place? If you do, adding visual feedback of the shrinking image is not difficult. – matt Feb 26 '17 at 14:35

1 Answers1

2

You should be able to do this with UIViewControllerAnimatedTransitioning.

In essence you would need to find the rect of the UIIMageView in your UICollectionViewCell and pass that to the custom animator object that implements UIViewControllerAnimatedTransitioning. The animator can then create a new UIImageView of the same image and animate it to move to the rect of where the image will be placed on the newly presented UIViewController.

These tutorials helped me do similar:

iwasrobbed
  • 46,496
  • 21
  • 150
  • 195
Harg
  • 365
  • 2
  • 18
  • Thank you! I had looked at one of those tutorials before. Only problem is that it's animated but it's not "interactive". Like how to make the animation interactive? The new uber app seems to use this in great way on how you can drag things around interactively + animated. – sudoExclaimationExclaimation Feb 25 '17 at 22:59
  • @PranoyC The link custom-uiviewcontroller-transitions gives a small guide near the end on how to make the transition animation interactive using UIViewControllerInteractiveTransitioning. Have you looked at that part? You will need to adapt the animation for your needs of course. – Harg Feb 26 '17 at 02:50