UIView 3DCube like Clear-app

Question

I've searched all posts on google and stackoverflow but I simply can't solve this puzzle. I'm trying to recreate the effect that the now-famous todo app 'Clear' does when adding a new task. They have some sort of animation that from the top a new task appears in some sort of 3D-cube effect. The special thing they have is that when you look closely the left and right bottom corners always stay in the same place.

Right now I have the following: one UIView of 320x460 set at point 0,0 and one UIView of 320x460 set at point (0,-460). What I want is the top UIView to come down in the same cube-effect as Clear from the top. This is what I have so far:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //startLoc is defined globally to remember the first position
    startLoc = [[touches anyObject] locationInView:self];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint location = [[touches anyObject] locationInView:self];
    float difference = location.y-startLoc.y;         

    if(diff > 0 && diff < 90)
    {
        //Init the transform
        CATransform3D transform = CATransform3DIdentity;
        transform.m34 = perspective;
        //Rotate (radians is a degree-to radians function)
        transform = CATransform3DRotate(transform, radians(90-diff), 1.0f, 0.0f, 0.0f);
        //Also translate the view down        
        transform = CATransform3DTranslate(transform, 0.0f, 230+diff, 0.0f);
        //the 230 is necessary I think for the Anchorpoint but I'm not sure
        secondView.layer.transform = transform;
}

}

It works somehow but not correctly, as soon as I do the rotation the view becomes bigger and the bottom-left and bottomright corners are out of the view. If I make the view smaller and then do a 3Dscale it's also messed up. I did already solve the issue of half of the image disappearing by correctly setting the zPosition of the layers, but this is as far as I get. I've tried to use code from other projects but all their 3D cube effects are not the same as the 'Clear' App. The only one that comes close is the iCarousel project but I'm not able to use the correct code from the app, I can't get it to work. Can someone help me?

score 2 · Answer 1 · answered May 04 '12 at 07:10

2

You can have a look at an opensource implementation on GitHub mystcolor/JTGestureBasedTableViewDemo

answered May 04 '12 at 07:10

James Tang

995
1
10
17

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

Here are some links that specifically cover the topic of UIView 3D perspective transformations:

http://www.sunsetlakesoftware.com/2008/10/22/3-d-rotation-without-trackball

http://watchingapple.com/2008/04/core-animation-3d-perspective/

This post is also relevant: How do I apply a perspective transform to a UIView?

edited May 23 '17 at 12:20

Community

1
1

answered Feb 23 '12 at 20:33

UIAdam

5,303
1
27
23

hi Adam, thanks for the links but unfortunately I've seen them all yesterday when searching. As I said in my post, they've done something more special in the Clear app and those posts don't explain how they did that. – Bob de Graaf Feb 24 '12 at 08:40
There is nothing terribly special about what Clear does. You just need to figure out the right combination of rotation/translation/anchor/z position, etc. It looks to me like the anchor point is the bottom middle of the view, which is initially rotated -90 degrees around the x-axis (i.e. towards the "inside" of the phone). Then as the table view is scrolled down, the new view is translated down to match the top of the existing content while also being rotated back to being parallel with the screen. – UIAdam Feb 24 '12 at 09:37
Alright thanks for you advice, I actually used a scrollview now and set the anchorpoint as you said and it suddenly worked. When not using a scrollview the image always became larger or something and now not anymore! Thanks anyway! – Bob de Graaf Feb 24 '12 at 10:16

UIView 3DCube like Clear-app

2 Answers2