iOS 中的 Instagram 快拍立方体转换是如何完成的?

How is the Instagram Stories cube transition done in iOS?

在 Instagram 的新功能 "Stories" 中的故事之间滑动时(你知道从一个故事到另一个故事时的类似立方体的过渡)我无法理解他们是如何做到的!

首先,如果您深入研究该功能,您会发现它的工作方式与 UIPageViewControllers 转换完全一样:

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

开发团队不可能使用基于更广为人知的解决方法的解决方案,例如:
https://www.appcoda.com/custom-view-controller-transitions-tutorial/
因为据我所知,除了 PageViewController 之外,我上面的两个陈述不可能实现。

这让我想到 Instagram 开发团队获得了 PageViewController 的新过渡样式(也称为 Cube-scroll),或者这是我不知道的解决方法?

有什么想法吗?

我认为您在这里对控制器的部分想得太多了。使用 CATransformLayer 和类似三边立方体的视图结构可以轻松实现这种效果,其中一个视图与屏幕平面对齐,另外两个视图在其 y 轴上旋转 -90 度和 90 度。然后,获取一个平移手势来旋转场景。成功旋转 90 度后(向任一方向),您可以快速重置场景(这样看起来继续旋转,但实际上相机移回初始位置)或者您可以进行完整的 360 度旋转,并更新上一个和下一个 "pages"。一个控制器可以处理这个场景。如果你更喜欢将每个页面都作为一个控制器,那是可以的,你仍然可以为场景使用一个控制器,然后将页面控制器用作子控制器,并按上述设置它们的视图。

有关 CATransformLayer 的详细信息,请参阅 this 文章。他们的示例已经创建了一些非常接近您需要的东西。

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

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

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

我的实现解决了您的两个问题(滑动时弹跳,可以暂停滑动)。我确信这也可以使用 UIPageViewController 实现,但我讨厌使用它们。