The paper folding/unfolding effect in twitter for iPad?

Here's a really simple example using a gesture recognizer and CATransform3D to get you started. Simply pinch to rotate the gray view (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ... CGRect rect = self.window. Bounds; view = UIView alloc initWithFrame:CGRectMake(rect.size.

Width/4, rect.size. Height/4, rect.size. Width/2, rect.size.

Height/2); view. BackgroundColor = UIColor lightGrayColor; self. Window addSubview:view; CATransform3D transform = CATransform3DIdentity; transform.

M34 = -1/500.0; // this allows perspective self.window.layer. SublayerTransform = transform; UIPinchGestureRecognizer *rec = UIPinchGestureRecognizer alloc initWithTarget:self action:@selector(pinch:); self. Window addGestureRecognizer:rec; rec release; return YES; } - (void)pinch:(UIPinchGestureRecognizer *)rec { CATransform3D t = CATransform3DIdentity; t = CATransform3DTranslate(t, 0, -self.view.bounds.size.

Height/2, 0); t = CATransform3DRotate(t, rec. Scale * M_PI, 1, 0, 0); t = CATransform3DTranslate(t, 0, -self.view.bounds.size. Height/2, 0); self.view.layer.

Transform = t; }.

Here's a really simple example using a gesture recognizer and CATransform3D to get you started. Simply pinch to rotate the gray view. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ... CGRect rect = self.window.

Bounds; view = UIView alloc initWithFrame:CGRectMake(rect.size. Width/4, rect.size. Height/4, rect.size.

Width/2, rect.size. Height/2); view. BackgroundColor = UIColor lightGrayColor; self.

Window addSubview:view; CATransform3D transform = CATransform3DIdentity; transform. M34 = -1/500.0; // this allows perspective self.window.layer. SublayerTransform = transform; UIPinchGestureRecognizer *rec = UIPinchGestureRecognizer alloc initWithTarget:self action:@selector(pinch:); self.

Window addGestureRecognizer:rec; rec release; return YES; } - (void)pinch:(UIPinchGestureRecognizer *)rec { CATransform3D t = CATransform3DIdentity; t = CATransform3DTranslate(t, 0, -self.view.bounds.size. Height/2, 0); t = CATransform3DRotate(t, rec. Scale * M_PI, 1, 0, 0); t = CATransform3DTranslate(t, 0, -self.view.bounds.size.

Height/2, 0); self.view.layer. Transform = t; }.

1 Great example. – Caleb Jun 28 at 17:59 I don't understand the purpose of the two CATransform3DTranslate method calls. – haroldcampbell Oct 31 at 1:04 @haroldcampbell The goal of those is to rotate around the edge of the layer, rather than the center.

– jtbandes Oct 31 at 2:41.

The effect is basically just a view rotating about the X axis: when you drag a tweet out of the list, there's a view that starts out parallel to the X-Z plane. As the user un-pinches, the view rotates around the X axis until it comes fully into the X-Y plane. The documentation says: The CATransform3D data structure defines a homogenous three-dimensional transform (a 4 by 4 matrix of CGFloat values) that is used to rotate, scale, offset, skew, and apply perspective transformations to a layer.

Furthermore, we know that CALayer's transform property is a CATransform3D structure, and that it's also animatable. Ergo, I think it's safe to say that the folding effect in question is do-able with Core Animation.

Essentially, this effect is comprised of several different steps: Gesture recognizer to detect when a pinch-out is occurring. When the gesture starts, Twitter is likely creating a graphics context for the top and bottom portion, essentially creating images from their layers. * Attach the images as subviews on the top and bottom.As the fingers flex in and out, use a CATransform3D to add perspective to the images.

Once the view has 'fully stretched out', make the real subviews visible and remove the graphics context-created images. To collapse the views, do the inverse of the above. *Because these views are relatively simple, they may not need to be rendered to a graphics context.

Twitter for iPad implements a fancy "pinch to expand paper fold" effect. A short video clip here. Can this be done with CATransform3D without OpenGL?

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions