Question

Using Core Animation, I would like to fold a UIView (i.e. it’s CALayer) on it’s center. i.e. I would set the anchor point as (0.5,0.5) & fold the layer. This image that I created in Photoshop might give the effect I am looking for –

So, what’s happening is, the layer is being folded on its center, as the fold is happening a little bit of perspective is applied (the infamous m34!). Initially, the view is parallel in X-Y plane with Z axis looking straight to the user. As the fold is happening, bottom half & top half at the same time move back (with some perspective, to give depth & 3D effect) till the entire layer is (parallel) in X-Z plane. Note that once the layer is parallel in X-Z plane, the user will no longer be able to see the Layer. But that’s ok, that’s the effect I am looking for. A UIView disappearing by folding on it’s center.

How would one go about doing this in iOS? Without using 2 different layers (for bottom & for top)? Any help is much appreciated…

Update: As @miamk points out, this is the same UI effect used in “Our Choice” App or “Flipboard” App.

UPDATE: I have offered bounty on this to get more specific answers. Would love to see –

1. Code samples.
2. Advise from people who have done something like this.
3. Even the way to achieve this in a detailed fashion (algo) is much appreciated.

Answer 1

A CALayer is a plane, and can not be folded. Unless you write a core image filter for it, like the page curl effect, but that if private API and not an option to you.

You need to split your view into two views, and fake the fold by transforming the two CALayers simultaneously.

By default a layers transform do not have perspective, so you must also setup this:

 transform.m34 = 1.0 / -2000;

OK Let’s be even clearer: Split the view in two and fold them:

Your view hiarchy according to the image you posted looks something like this:

+ 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

So introduce two new views to this view hierarchy for the purpose of folding, like this:

+ 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

Not too hard. Now animate only the two views used for grouping the top and bottom half.

I will not write the code for you, but one more vital tip to make it easy: Change the anchor points of the view to animate! You do not want to rotate them by their own centers, instead shift the center of rotation to align with the edges they have against each other.

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