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

Posted 2023-03-12

【中文标题】如何重新创建 Jetsetter 的 iOS 预告照片和照片查看器幻灯片过渡？

【英文标题】：How to recreate Jetsetter's iOS teaser photo & photo viewer slideshow transition?

【发布时间】：2012-07-27 18:26:01

【问题描述】：

我遇到的最令人印象深刻的 ios 应用之一是 Jetsetter，因为它具有出色的设计、令人难以置信的界面和对动画的创造性使用。我最喜欢的应用程序组件之一是他们为酒店/场地提供的预告照片界面。它们提供了一个最小化的照片幻灯片，但如果你想要完整的视图，你可以单击它，它会展开以显示更大版本的图像。你可以在here看到一个模糊的视频。

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

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

【参考方案1】：

来自 Jetsetter 的移动工程师。它们是两个独立的控制器，但过渡动画发生在第一个控制器中。流程如下：

用户点击较小的照片。 包含完整尺寸图像的过渡视图直接放置在较小图像的顶部。 过渡视图动画到屏幕边界。 照片查看器控制器以不带动画的模式呈现，在一个无缝动画中完成效果。

模态控制器关闭时效果相反。

诀窍在于您的过渡视图。我们创建了一个包含 imageView 的 UIView 子类（启用了 clipsToBounds）。过渡视图的边界展开以显示 imageView，从而在动画期间不会导致最终图像失真。