iOS核心动画 - 折叠图层

Question

iOS核心动画 - 折叠图层

objective-ciosanimationuiviewcore-animation

14

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

enter image description here

所发生的事情是，该层被折叠在其中心，当折叠发生时，应用了一点透视效果（臭名昭著的m34！）。最初，视图在X-Y平面上与Z轴平行，直接朝向用户。随着折叠的发生，底部和顶部同时向后移动（带有一定的透视效果，以给予深度和3D效果），直到整个层在X-Z平面上（平行）。请注意，一旦该层在X-Z平面上平行，用户将无法再看到该层。但这没关系，这就是我想要的效果。一个UIView通过在其中心折叠而消失。

如何在iOS中实现这一点？不使用两个不同的层（用于底部和顶部）？任何帮助都非常感谢...

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

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

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

- Srikar Appalaraju

这会类似于阿尔·戈尔的《我们的选择》应用程序（折叠和打开图像）或Flipboard的翻页动画，对吧？好问题，虽然我怀疑我无法提供任何帮助。 - MiguelB

是的，就像那样！看看你能不能想出任何主意？无论多么疯狂... - Srikar Appalaraju

3个回答

11

这种工作流怎么样：

从视图获取图像

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

接下来使用以下代码创建两个图像（顶部和底部矩形）：

CGImageCreateWithImageInRect( CGImageRef, CGRect);

这将使你拥有所需的资源以做你想做的事情。可以动态创建并进行动画处理的顶部和底部图像。

- Zimmen

3

我需要隐藏原始视图吗？然后将这两个图像（顶部和底部）放在隐藏的视图上方，使其看起来像一个整体，然后执行折叠动画？ - Srikar Appalaraju

5

我做了一些研究，并在Github上偶然发现了这个很棒的项目：AFKPageFlipper。这是一个相当新的项目，你知道吗？它完全只使用了简单的Core Animation来实现类似Flipboard的动画效果。

看一下它，代码非常容易理解，也许可以为你实现需要的功能提供一些方向。

- MiguelB

@BarryWark 我确实发了，但是由于某些原因被编辑撤掉了。在修订之前，您仍然可以看到链接。 - MiguelB

@Strikar 为什么要删除链接？ - MiguelB

已经为您回滚了。不知道他一开始为什么要删除它。 - sudo rm -rf

如果你仔细看代码，这个库做了其他答案中提到的事情，它将当前层分成两个图像，并适当地动画化左右层。你可以在initFlip中看到这段代码，所以并不是很令人印象深刻哈哈。 - TheCodingArt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PeyloW · Accepted Answer

CALayer 是一个平面，不能被折叠。除非你编写一个核心图像滤镜（例如页面翻页效果），但这是私有API，对你不可用。

你需要将视图分成两个视图，并通过同时变换两个 CALayer 来伪造折叠效果。

默认情况下，图层的变换没有透视效果，因此你还需要设置它：

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