iOS核心动画-折叠一层

Question

使用核心动画，我想折叠一个UIView (即它是CALayer)在它的中心。也就是说，我会将锚点设置为(0.5,0.5)，并折叠这一层。我在Photoshop中创作的这张照片可能会给我带来我想要的效果-

​

​

所以，正在发生的是，层被折叠在它的中心，当折叠发生的时候，应用了一点透视图(臭名昭著的m34!)。最初，视图在X平面上是平行的，Z轴直视用户.当褶皱发生时，下半部分和上半部分同时向后移动(有一定的视角，以给出深度和3D效果)，直到整个层在X平面上(平行)。注意，一旦该层在X平面上平行，用户将无法再看到该层。但没关系，这就是我想要的效果。一个UIView通过折叠在它的中心消失。

怎样才能在iOS中做到这一点呢？不使用两个不同的层(对于底部和顶部)？任何帮助都是非常感谢的。

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

更新：，为了得到更具体的答案，我已经在这方面提供了赏金。我很想看看-

1. 代码样本。
2. 从做过这种事的人那里得到建议。
3. 即使是以一种详细的方式(algo)实现这一目标的方式也是非常值得赞赏的。

Answer 1

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

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

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

 transform.m34 = 1.0 / -2000;

OK，让我们更加清楚:将视图分割成两部分，并折叠它们：

根据您发布的图片，您的视图如下所示：

+ 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

做了一项小小的研究，偶然发现了这个令人敬畏的项目：AFKPageFlipper。最近，你知道这件事吗？它本质上是Flipboard的动画，完全用简单简单的核心动画来完成。

看看它，它令人惊讶地容易完成代码，它可能只是给您提供了一些关于如何实现所需内容的指导。