iOS 中的 Instagram Stories 立方体过渡是如何完成的？答案

【问题标题】：How is the Instagram Stories cube transition done in iOS?iOS 中的 Instagram Stories 立方体过渡是如何完成的？
【发布时间】：2016-09-29 21:36:26
【问题描述】：

在 Instagram 的新功能“故事”中的故事之间滑动时（您知道从一个故事转到另一个故事时的立方体状过渡）我无法理解他们是如何做到的！

首先，如果您深入研究该功能，您会发现它的工作原理与 UIPageViewControllers 转换完全一样：

- 从一个视图快速滑动到另一个视图时它会弹跳。
- 您可以通过触摸屏幕在过渡的中间暂停滑动。

开发团队无法使用基于更广为人知的解决方法的解决方案，例如：
https://www.appcoda.com/custom-view-controller-transitions-tutorial/
因为据我所知，我上面的两条语句是不可能用除了 PageViewController 之外的任何东西来实现的。

这让我觉得 Instagram 开发团队获得了对 PageViewController 的新过渡样式（也称为 Cube-scroll）的访问权限，或者这是我不知道的解决方法？

有什么想法吗？

【问题讨论】：

不确定你的两点如何暗示UIPageViewController。观看here 解释了如何在任意两个视图控制器之间进行交互式、可中断的自定义转换。
第一点我的意思是当做快速滑动手势时，会发生到下一个视图的分页，但是因为滑动手势太快了，所以在一些之后分页也会反弹到下一个视图在弹回正确视图之前，也会显示该视图的像素。这种行为是我只在启用分页的 UIPageViewController 或 ScrollViews 中看到的。我会看一下视频。我打算为此找到一个可行的解决方案，因此我将不胜感激有关如何解决它的答案或一些提示。

标签： ios swift instagram swipe uipageviewcontroller

【解决方案1】：

不久前，我尝试重新创建此功能。可以在 GitHub 上查看源代码：https://github.com/oyvind-hauge/OHCubeView

我正在使用滚动视图（启用了分页），并且对于每个子视图，我将它们作为给定视图在滚动视图中的当前 x 偏移量的函数进行操作。实际的动画是使用 Core Animation 在每个子视图的层上完成的（更具体地说，转换一个单位矩阵，由CATransform3DIdentity 给出，使用方法CATransform3DRotate）。

阴影效果也应用于子视图的图层 (view.layer.opacity)，阴影量取决于屏幕上显示的视图量。

我的实现解决了您的两个问题（滑动时反弹，可以暂停滑动）。我确信这也可以使用 UIPageViewController 实现，但我讨厌使用这些。

【讨论】：

你知道如何在 ios 8 上使用它吗？有什么办法可以修改吗？我真的很想使用它，它非常适合我正在做的事情，但我真的想让我的应用程序与 ios 8 兼容。
您想使用它真是太好了。自从我查看代码以来已经有一段时间了，但让我回复您。
@WayneFilkins，所以我不能支持 iOS 8 的原因是因为我使用的是 UIStackView，它只能从 iOS 9 中获得。这个类不容易删除，因为它是实施。对此感到抱歉。
我似乎无法让您的组件工作。我在使用 xcode 9/swift3 编译时修复了大部分 swift 问题，但是当我运行我的应用程序时，子视图 x 坐标偏移了屏幕宽度的一半。 setAnchorPoint 方法好像有问题？我想不明白。知道我可能做错了什么吗？我已按照 github 页面上显示的设置过程进行操作。
@Jovan 我更新了 repo 以支持 Swift 3.x（如果你使用的是 pod，你可以拉取 1.0.1 版本）。

【解决方案2】：

我认为您在这里过度考虑了控制器的部分。使用CATransformLayer 和三边立方体视图结构可以轻松实现该效果，其中一个视图与屏幕平面对齐，另外两个在其 y 轴上旋转 -90 度和 90 度。然后，获得平移手势来旋转场景。成功旋转 90 度后（在任一方向），您可以快速重置场景（使保持旋转看起来好像在继续，但实际上相机已移回初始位置），或者您可以进行完整的 360 度旋转，并且只需更新上一个和下一个“页面”。一个控制器可以处理这个场景。如果您希望将每个页面都作为一个控制器，那么您仍然可以为场景使用一个控制器，然后将页面控制器用作子控制器，并按上述方式设置它们的视图。

有关CATransformLayer 的更多信息，请参阅this 文章。他们的示例已经创建了非常接近您需要的东西。

【讨论】：