Question

I have UIView with UIImageViews, UILabels, UITextView.

My goal is to transform the middle part so it would look like folding a piece of paper:
– top and bottom parts remain the same only they slide towards eachother
– middle part folds towards the screen
(as in Clear app: http://blog.massivehealth.com/post/18563684407/clear?cbe4fc38)

My idea was to first load whole view, then split into 4 parts, make middle two parts into CGImage and somehow animate them with perspective while simultaneously transforming top and bottom parts, so they slide towards eachother (in the end, middle two parts should become invisible).

I also should be able to unfold this view and scroll UITextView.

I’m not looking for a ready-to-go answer, just pointers towards correct solution.
I have came across CALayer, CABasicAnimation and CGImage, but yet don’t know how to solve this one.

Answer 1

A few pointers:

1. convert your UIView into an image: see this post; either you take 4 “snapshots” of your view, or:

   1.2 you take one, then crop the resulting image (see here for cropping);

2. create a new view and add 4 CALayers as sublayers of self.layer; each layer has its contents property set to the corresponding UIImage;

3. animate the view layers as you need; have a look at this file from the Leaves framework to see how this could be done; basically, this code uses a CATransaction and transformations to animate a property of the layers (which in this case represents the position of one layer respect another), so that when that property value changes, the layers are redrawn accordingly.

Hope it helps.