iOS 核心动画 - 折叠图层

Posted 2023-03-13

【中文标题】iOS 核心动画 - 折叠图层

【英文标题】：iOS Core Animation - Fold a Layer

【发布时间】：2011-08-08 06:07:45

【问题描述】：

使用核心动画，我想在它的中心折叠一个UIView（即CALayer）。即我会将锚点设置为 (0.5,0.5) 并折叠图层。我在 Photoshop 中创建的这张图片可能会产生我正在寻找的效果 -

所以，正在发生的事情是，图层在其中心被折叠，因为折叠发生时应用了一点透视（臭名昭著的m34！）。最初，视图平行于 X-Y 平面，Z 轴直视用户。随着折叠的发生，下半部分和上半部分同时向后移动（有一些透视，以提供深度和 3D 效果）直到整个层（平行）在 X-Z 平面中。请注意，一旦图层在 X-Z 平面上平行，用户将无法再看到图层。不过没关系，这就是我要找的效果。 UIView 在其中心折叠后消失。

如何在ios 中进行此操作？不使用 2 个不同的层（底部和顶部）？非常感谢任何帮助...

更新：正如@miamk 指出的那样，这与 “Our Choice” 应用或 “Flipboard” 应用中使用的 UI 效果相同.

更新：我为此提供了赏金以获得更具体的答案。很想看看 -

代码示例。 来自做过类似事情的人的建议。 即使以详细的方式（算法）实现这一目标的方法也非常受欢迎。

【问题讨论】：

这类似于 Al Gore 的 Our Choice 应用程序（图像的折叠和打开）或 Flipboard 的翻页动画，对吧？好问题，虽然我怀疑我能帮上什么忙。

是的，就是这样！看看你能不能想出什么主意？不管它有多古怪……

【参考方案1】：

CALayer 是平面，不能折叠。除非你为它编写一个核心图像过滤器，比如页面卷曲效果，但如果是私有 API 而不是你的选项。

您需要将视图拆分为两个视图，并通过同时转换两个 CALayers 来伪造折叠。

默认情况下，图层变换没有透视，因此您还必须设置：

 transform.m34 = 1.0 / -2000;

好的，让我们更清楚一点：将视图一分为二并折叠起来：

根据您发布的图片，您的视图层次结构如下所示：

+ UIView      - Root view
    + UIImageView - The persons face
    + UILabel     - The label with title
    + UILabel     - The label with company name
    + UILabel     - The label with a short description.
    + UILabel     - The label with e-mail
    + UILabel     - The label with web address
    + UILabel     - The label with phone number

所以为了折叠的目的在这个视图层次结构中引入两个新的视图，像这样：

+ UIView    - Root view
    + UIView      - Top half of the card
        + UIImageView - The persons face
        + UILabel     - The label with title
        + UILabel     - The label with company name
        + UILabel     - The label with a short description.
    + UIView      - Bottom half of the view
        + UILabel     - The label with e-mail
        + UILabel     - The label with web address
        + UILabel     - The label with phone number

不太难。现在只为用于组合上半部分和下半部分的两个视图设置动画。

我不会为你编写代码，但还有一个更重要的技巧来简化它：将视图的锚点更改为动画！您不想按它们自己的中心旋转它们，而是移动旋转中心以与它们彼此相对的边缘对齐。

 topView.layer.anchorPoint = CGPointMake(0.5f, 1.0f);
 bottomView.layer.anchorPoint = CGPointMake(0.5f, 0.0f);

【讨论】：

我想到将我的视图分成 2 层并在其上运行动画。但是原始层会发生什么？如何将我的CALayer 拆分为 2 层？动画完成后，如何恢复？您发布的代码是为了给出观点，我知道这一点。我需要帮助的真正部分是将我的图层分成两部分......

@Srikar - 我不会一直拆分和合并图层。我会选择两个恰好相邻的UIViews。更少的绒毛。

首先感谢您抽出时间来讨论这个问题。现在回来，你说的可能会变得很难看，因为我想在UITableViewCell 上这样做。我想让我的 tableViewCell 折叠并消失。使用您的方法，我需要提供大量代码来将我的内容划分为 2 个单元格。一定有更好的方法吗？

您可以将原始内容渲染到图像上下文中，然后将该图像用作两层的内容。但从你在问题中的形象来看，这对你来说更有用。

是的，看起来很复杂。我想我明白你在说什么。任何地方、任何文档、任何可以帮助我的阅读材料？

【参考方案2】：

这种工作流程怎么样：

从视图中获取图像

UIGraphicsBeginImageContext(self.bounds.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

然后使用

创建2个图像（顶部和底部矩形）

CGImageCreateWithImageInRect( CGImageRef, CGRect);

这为您留下了做您想做的事所需的资产。动态创建的可以动画的顶部和底部图像。

【讨论】：

所以我要隐藏原始视图吗？并将这 2 个图像（顶部，底部）放在隐藏视图的顶部，使其显示为一个，然后执行折叠动画？

【参考方案3】：

做了一些研究，并在 Github 上偶然发现了这个很棒的项目：AFKPageFlipper。 它是最近的，你知道吗？它本质上是 Flipboard 的动画，完全用简单明了的 Core Animation 完成。

看看它，它非常容易理解代码，它可能只会为您提供一些关于如何实现所需内容的指导。

【讨论】：

@BarryWark 我做到了。由于某种我不太明白的原因，它被编辑了。您仍然可以看到修订前的链接。

@Strikar 为什么要删除链接？

那里，为你回滚。不知道他为什么首先删除它。

如果您注意代码，该库会执行其他答案中提到的操作，它将当前图层分成两个图像并适当地为左右图层设置动画。你可以在 initFlip 中看到这段代码，所以并没有那么令人印象深刻。