iOS 核心动画 - 折叠图层

Question

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

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

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

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

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

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

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

Answer 2

这种工作流程怎么样：

从视图中获取图像

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

然后使用

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

CGImageCreateWithImageInRect( CGImageRef, CGRect);

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

Answer 3

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

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