32

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

enter image description here

Pang
  • 9,564
  • 146
  • 81
  • 122
user1218464
  • 1,011
  • 2
  • 12
  • 22

1 Answers1

20

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.

demon
  • 833
  • 1
  • 10
  • 20
  • Thanks you. I understand theoretically, but it'd be nice to see an actual example using code to really understand the intricacies. For example, in both your and Pinterest app, the position of the cell also change when you zoom back out. There's little things that make sense conceptually, but it's actually coding it that's the challenge. – user1218464 Jun 26 '14 at 22:43
  • @user1218464 Roger that, I'll show you a demo to implement this maybe somedays later, and I'd like to see if there's a better way to do this transition, after it finished i'll edit this answer. – demon Jun 27 '14 at 02:10
  • Hey, I wanted to know, what if I want to delete a cell from the collection view when tapped over a button, how should I implement that? – Stephanie Oct 18 '17 at 16:03