iOS核心动画 - 折叠图层

Question

使用核心动画，我想在它的中心折叠UIView（即CALayer）。即我将锚点设置为（0.5,0.5）＆amp;折叠图层。我在Photoshop中创建的这张图片可能会产生我想要的效果 -

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

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

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

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

1. 代码示例。
2. 来自做过类似事情的人的建议。
3. 非常感谢即使是以详细方式（算法）实现这一目标的方式。

Answer 1

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

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

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

 transform.m34 = 1.0 / -2000;

OK让我们更清楚：将视图分成两部分并折叠起来：

根据您发布的图片，您的观点是hiarchy，如下所示：

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

Answer 2

这种工作流程怎么样：

从视图中获取图片

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

然后使用

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

CGImageCreateWithImageInRect( CGImageRef, CGRect);

这样您就可以获得所需的资产。动态创建可以设置动画的顶部和底部图像。

Answer 3

做了一点研究并偶然发现了这个关于Github的精彩项目：AFKPageFlipper。 它是最近的，你知道吗？它本质上是Flipboard的动画完全由简单的Core动画完成。

看看它，它非常容易理解代码，它可能只是给你一些指导如何实现你需要的东西。