How to transition from UICollectionView to UIViewController like Pinterest/Evernote

Question

I have a UICollectionView and when an item is selected, I'd like it to animate full screen. So it would transition from the size of the cell to full screen and become a UIViewController. Pinterest and Evernote both have this behavior where tapping on a cell transitions the cell into a full screen view controller.

Are there any example of how this is done? I've searched several projects, but haven't found any illustrating on transitioning a cell to full screen view controller.

Pinterest discusses it here: https://medium.com/@Pinterest_Engineering/behind-the-pins-building-pinterest-3-0-for-ios-100f57f6940

Answer 1

It's not difficult to implement this transition. Just like the article said, they custom a transition to implement UIViewControllerAnimatedTransitioning protocol, nothing besides. You need to calculate the new size the position which imageView you tapped to animate. That's it.

This our two apps, all implement this similar transition effect by this method above.

https://itunes.apple.com/app/hua-ban-quan-qiu-you-mei-tu/id494813494?mt=8

And this one:

https://itunes.apple.com/app/mei-tu-sou-sou-wan-zhuan-wei/id781146829?mt=8

---

I'd created this repo several days before. And with Swift, I almost finished this transition beside some little issue, this is my first practised demo project based Swift. But it's not hard to understand if you're not freshman in iOS dev and you'd learn Swift BTW. I'll finish it and fix the bugs later.

In real project it's more complex than the demo one, but with that, maybe you'd knew how to achieve this kind of transition.

Good luck.