Objective c iOS核心动画-折叠层

使用核心动画，我想在其中心折叠一个

UIView

（即

CALayer

）。i、 e.我将锚定点设置为（0.5,0.5）&折叠层。我在Photoshop中创建的这幅图像可能会产生我想要的效果-

因此，发生的是，层在其中心被折叠，因为折叠发生了一点透视（臭名昭著的

m34

！）。最初，视图在X-Y平面上平行，Z轴直视用户。随着褶皱的发生，下半部分和上半部分同时向后移动（带有一些透视图，以提供深度和3D效果），直到整个层在X-Z平面上（平行）。请注意，一旦该层在X-Z平面上平行，用户将无法再看到该层。但没关系，这就是我想要的效果。A

ui视图

通过在其中心折叠而消失

在

iOS

中，人们会怎么做呢？不使用两个不同的层（底部和顶部）？非常感谢您的帮助

更新：正如@miamk指出的，这与“我们的选择”应用程序或“Flipboard”应用程序中使用的UI效果相同

更新：我提供了这方面的悬赏，以获得更具体的答案。我很想看到-

代码示例

从做过类似事情的人那里得到建议

即使是以一种详细的方式（algo）实现这一点的方法也备受赞赏

---

做了一点研究，在Github上偶然发现了这个很棒的项目：。 这是最近的事，你知道吗？它本质上是Flipboard的动画，完全由简单的核心动画完成

---

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

A

CALayer

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

您需要将视图拆分为两个视图，并通过同时变换两个

CALayer

s来伪造折叠

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

 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

因此，为了折叠的目的，向该视图层次结构引入两个新视图，如下所示：

+ 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);

---

这种工作流程如何：

从视图中获取图像

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

然后使用创建两个图像（顶部和底部矩形）

---

这就给你留下了做你想做的事情所需要的资产。动态创建可设置动画的顶部和底部图像。

这类似于阿尔·戈尔的“我们的选择”应用程序（图像的折叠和打开）或Flipboard的翻页动画，对吗？问得好，不过我怀疑我能帮上什么忙。是的，差不多吧！看看你能想出什么主意？不管它有多古怪……我想到了将我的视图分成两层并在上面运行动画的想法。但是原始层会发生什么呢？如何将我的

CALayer

拆分为两层？动画完成后，如何恢复？你发布的代码，是为了给人一个视角，我知道这一点。我需要帮助的真正部分是将我的图层分成两部分…@Srikar-我不会一直拆分和合并图层。我会选择两个正好相邻的

UIView

s。少一些模糊。首先感谢您抽出时间讨论这个问题。现在回来，您所说的可能会变得难看，因为我想在

UITableViewCell

上执行此操作。我想将我的tableViewCell折叠并消失。使用您的方法，我需要提供大量代码，将我的内容划分为两个单元格。必须有更好的方法吗？你可以将原始内容渲染到一个图像上下文中，然后将该图像用作两个层的内容。但从你在问题中的形象来看，你需要做更多的工作。是的，看起来很复杂。我想我明白你的意思了。任何地方，任何文档，任何可以帮助我的阅读材料？那么我要隐藏原始视图吗？然后将这两个图像（顶部、底部）放在隐藏视图的顶部，使其显示为一个&然后执行折叠动画？@BarryWark我做了。由于某种原因我不太明白，它被删掉了。您仍然可以看到修订之前的链接。@Strikar为什么删除链接？在那里，为您回滚。如果你注意代码，这个库会执行其他答案中提到的操作，它会将当前层拆分为两个图像，并适当地设置左侧和右侧层的动画。您可以在initFlip中看到这段代码，所以并没有那么令人印象深刻。