How to apply 3d perspective transform only in one part of compound UIView?

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.

score 2 · Answer 1 · answered Jun 02 '12 at 14:59

2

I think your approach is sound. Since you cannot apply a transform to part of a view, you have to split your container view into separate parts. You can use the CALayer method renderInContext: to render a view into a static image. You can then split this image into the parts you need, place the image parts over the original view (or replace the view with the image) and animate the images. When the animation has finished, reinstate the view in its new form.

answered Jun 02 '12 at 14:59

Ole Begemann

135,006
31
278
256

So basicly what you are saing i have to: 1. Lay out a view 2. Render static image 3. split image to 4 parts 4. Animate 5. Create new view 6. Remove static image ? So first i will use renderInContext, what class/method will be helpful to split this static image and then animate with 3d perspective ? – patrykens Jun 02 '12 at 15:13

score 1 · Accepted Answer · edited May 23 '17 at 10:34

A few pointers:

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);
create a new view and add 4 CALayers as sublayers of self.layer; each layer has its contents property set to the corresponding UIImage;
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.

Yep, that helped :) I've almost finished. Thanks! – patrykens Jun 03 '12 at 00:30 — patrykens, Jun 03 '12 at 00:30

How to apply 3d perspective transform only in one part of compound UIView?

2 Answers2