objective-c - iOS核心动画——折叠一层

Question

使用 Core Animation，我想在它的中心折叠一个 UIView(即它是 CALayer)。即我会将 anchor 设置为 (0.5,0.5) 并折叠图层。我在 Photoshop 中创建的这张图片可能会提供我正在寻找的效果 -

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

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

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

更新:我为此悬赏以获得更具体的答案。很想看看 -

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

Answer 1

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

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

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

 transform.m34 = 1.0 / -2000;

好吧，让我们更清楚:将 View 一分为二并折叠它们:

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

+ 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

所以为了折叠的目的，向这个 View 层级引入两个新的 View ，像这样:

+ 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

不难。现在仅对用于对上半部分和下半部分进行分组的两个 View 设置动画。

我不会为您编写代码，但有一个更重要的提示可以使它变得简单:将 View 的 anchor 更改为动画!您不想通过它们自己的中心旋转它们，而是移动旋转中心以与它们彼此相对的边缘对齐。

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