iOS核心动画 - 折叠图层

Question

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

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

怎么会这样做iOS呢？不使用2个不同的层(底部和顶部)？任何帮助深表感谢...

更新:正如@miamk所指出的,这与"我们的选择"应用程序或"Flipboard"应用程序中使用的UI效果相同.

更新:我已经提供奖励以获得更具体的答案.很想看到 -

1. 代码示例.
2. 向做过类似事情的人提供建议.
3. 甚至以详细的方式(算法)实现这一点的方式也非常受欢迎.

Answer 1

A CALayer是飞机,不能折叠.除非你为它编写核心图像过滤器,比如页面卷曲效果,但是如果是私有API而不是你的选项.

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

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

 transform.m34 = 1.0 / -2000;

好吧让我们更清楚:将视图分成两部分并折叠它们:

您根据所发布的图像查看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的动画完全由简单和简单的核心动画完成.

看看它,它非常容易理解代码,它可能只是给你一些指导如何实现你需要的方向.