iOS核心動畫 - 折疊圖層

Question

使用Core Animation，我想在它的中心折疊一個UIView （即它的CALayer ）。 即我將錨點設置為（0.5,0.5）並折疊圖層。 我在Photoshop中創建的這張圖片可能會產生我想要的效果 -

所以，正在發生的是，層正在折疊在它的中心，因為折疊發生了一點點透視（臭名昭着的m34 ！）。 最初，視圖在XY平面中是平行的，Z軸直視用戶。 隨着折疊的發生，下半部分和上半部分同時向后移動（有一些透視，給出深度和3D效果）直到整個層在XZ平面中（平行）。 請注意，一旦圖層在XZ平面中平行，用戶將無法再看到圖層。 但那沒關系，這就是我正在尋找的效果。 UIView通過折疊它的中心而消失。

怎么會在iOS這樣做呢？ 不使用2個不同的層（底部和頂部）？ 任何幫助深表感謝...

更新：正如@miamk所指出的，這與“我們的選擇”應用程序或“Flipboard”應用程序中使用的UI效果相同。

更新：我已經提供獎勵以獲得更具體的答案。 很想看到 -

1. 代碼示例。
2. 向做過類似事情的人提供建議。
3. 甚至以詳細的方式（算法）實現這一點的方式也非常受歡迎。

Answer 1

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的動畫完全由簡單和簡單的核心動畫完成。

看看它，它非常容易理解代碼，它可能只是給你一些指導如何實現你需要的方向。