How to recreate Jetsetter's iOS teaser photo & photo viewer slideshow transition?

Question

One of the more impressive iOS app that I've come across is Jetsetter's due to its great design, incredible interface, and creative uses of animation. One of my favorite components of the app is the teaser photo interface they have for the hotels/venues. They provide a minimized photo slideshow, but if you want the full view you can click it and it expands to expose a larger version of the image. You can see a blurry video of this in action here.

I'm interested in recreating something similar. I'm well aware of the paged galleries like MHPagingScrollview (which is how the larger photo viewer functions), yet what I'm trying to figure out is the proper way to handle the transition. I've also seen libraries that handle the Ken Burns effect for images. However what is not clear is whether or not there are separate view controllers.

Is this a transition between two separate view controllers? Or would the minimized and maximized photo viewer be part of the same controller? How would you most efficiently replicate something similar? I've embedded a screen shot below to illustrate the before and after. The video linked above however most effectively illustrates this transition.

Answer 1

Mobile engineer from Jetsetter here. They are two separate controllers, but the transition animation occurs in the first. Here's the flow:

1. A user taps the smaller photo.
2. A transition view containing the full size image is placed directly on top of the smaller image.
3. The transition view animates to the bounds of the screen.
4. The photo viewer controller is presented as a modal without animation, completing the effect in one seamless animation.

The effect is reversed when the modal controller is dismissed.

The trick lies in your transition view. We created a UIView subclass (with clipsToBounds enabled) that contains an imageView. The bounds of the transition view expands to reveal the imageView, resulting in no distortion of the final image during the animation.