iOS 中的 Instagram Stories 立方体过渡是如何完成的?
Posted
技术标签:
【中文标题】iOS 中的 Instagram Stories 立方体过渡是如何完成的?【英文标题】:How is the Instagram Stories cube transition done in iOS? 【发布时间】: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 中看到的。我会看一下视频。我打算为此找到一个可行的解决方案,因此我将不胜感激有关如何解决它的答案或一些提示。
【参考方案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 文章。他们的示例已经创建了非常接近您需要的东西。
【讨论】:
以上是关于iOS 中的 Instagram Stories 立方体过渡是如何完成的?的主要内容,如果未能解决你的问题,请参考以下文章
IOS 应用程序中的 instagram 集成中的“重定向 URI 与注册的重定向 URI 不匹配”