UIView 3DCube as Clear-app

Question

I searched all posts on google and stackoverflow, but I just can't solve this riddle. I am trying to recreate the effect that the famous todo "Clear" application now makes when adding a new task. They have some kind of animation, due to which a new task appears in some kind of 3D cube effect. The special thing they have is that upon careful examination, the lower left and right corners always remain in the same place.

Now I have the following: one UIView 320x460 installed at the point 0,0, and one UIView 320x460 installed at the point (0, -460). I want the top UIView to go down in the same cubic effect as Clear on 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 make a turn, the view becomes larger, and the lower left and right corners are not visible. If I make the view smaller and then make 3Dscale, it will also go bad. I already solved the problem with half the disappearance of the image by setting the zPosition layers correctly, but as far as I understand. I tried to use code from other projects, but all of their 3D cube effects do not match the “Clear” App. The only one that comes close is the iCarousel project, but I cannot use the correct code from the application, I cannot make it work. Can anybody help me?

Answer 1

Here are some links that specifically cover the topic of promising UIView 3D 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 to apply perspective transformation to a UIView?

Answer 2

You can take a look at the open source implementation on GitHub mystcolor / JTGestureBasedTableViewDemo