Question

I’ve seen this nice effect and I would like to use something similar in an app that I’m designing at the moment. I’m assuming that this isn’t one of the ‘standard’ transitions.

Does anyone know how something like that could be achieved? I’m not really after a detailed code sample, more of a high level overview/nudge in the right direction.

Answer 1

I would do it like this:

1. Create two layers: one for the left side and one for the right side of the view you want to fold in.

2. In these layers, render an image of the left or right side of the view to be folded in, respectively. The renderInContext: method should do this in most cases.

3. The initial position of the two layers is on the left edge of the screen (x = 0.0). Set the left layer’s anchor point to (0.0, 0.5) and the right layer’s to (1.0, 0.5). You should also assign a rotation transform around the y axis to the layers: -90 degrees for the left layer and +90 degrees for the right layer (or the other way around, I’m not sure; try it out).

4. Now when the user activates the fold-in action, start an animation (or go along with a gesture) that resets the two layer’s transforms to the identity matrix. You probably also have to adjust the right layer’s position so that it does not cling to the left edge of the screen.

5. Only when the animation/gesture is complete, you replace the two layers (containing only a static image) with the actual view that you wanted to fold in.