How to recreate Jetsetter iOS teaser photo and slideshow viewer?

Question

One of the most impressive iOS apps I've come across is Jetsetter because of its great design, incredible interface, and creative use of animation. One of my favorite app components is the photo designer interface that they have for hotels / locations. They provide a minimal slide show of photos, but if you want full viewing you can click on it, it expands to expose a larger version of the image. You can see the blurry video of this in action here .

I'm interested in recreating something like that. I know the galleries posted in the gallery, such as MHPagingScrollview (this is how the larger photo viewer works), but what I'm trying to figure out is the correct way to handle the transition. I also saw libraries that handle the Ken Burns effect for images. However, it is unclear if there are separate view managers.

Is this a transition between two separate dispatchers? Or will minimized and maximally optimized photo viewing be part of the same controller? How would you most effectively reproduce something like that? I have provided a screenshot below to illustrate before and after. The video linked above , however, best illustrates this transition.

Answer 1

The mobile engineer from Jetsetter is here. These are two separate controllers, but the transition animation happens in the first. Here's the thread:

• User deletes smaller photo.
• A transition view containing a full-sized image is placed directly on top of the smaller image.
• The transition view is animated at the borders of the screen.
• The photo view controller is presented as modal without animation, completing the effect in one seamless animation.

The effect is canceled when the modal controller is rejected.

The trick lies in your view of the transition. We created a subclass of UIView (with clipToBounds enabled) that contains imageView. The boundaries of the transition view are expanded to show the View image, which does not distort the final image during the animation.