如何重新创建Jetsetter的iOS预告片照片和照片查看器幻灯片转换？

Question

我遇到过的更令人印象深刻的iOS应用之一是Jetsetter，它的优秀设计，令人难以置信的界面和动画的创造性使用。我最喜欢的应用程序组件之一是他们对酒店/场馆的预告照片界面。它们提供了最小化的照片幻灯片，但是如果您想要全视图，则可以单击它并将其展开以展示较大版本的图像。你可以在行动here看到一个模糊的视频。

我很感兴趣，重新创建类似的东西。我非常了解像MHPagingScrollview这样的分页画廊（这是更大的照片查看器的功能），但我想弄清楚的是处理过渡的正确方法。我还见过处理Ken Burns effect图像的库。然而，不清楚的是是否有单独的视图控制器。

这是两个独立视图控制器之间的转换吗？或者最小化和最大化的照片浏览器是否是同一控制器的一部分？你将如何最有效地复制类似的东西？我在下面嵌入了一个屏幕截图，以说明前后的情况。然而，video linked above最有效地说明了这种转变。从这里的Jetsetter

Answer 1

移动工程师。它们是两个独立的控制器，但过渡动画首先发生。这里是流程：

1. 用户点击较小的照片。
2. 包含全尺寸图像的转场视图直接放置在较小图像的顶部。
3. 过渡视图动画到屏幕的边界。
4. 照片查看器控制器以无模式显示，以一个无缝动画完成效果。

当模态控制器被解除时，效果被逆转。

诀窍在于你的转换视图。我们创建了一个包含imageView的UIView子类（启用了clipsToBounds）。过渡视图的范围扩大以显示imageView，从而在动画期间不会导致最终图像失真。