the paper folding/unfolding effect in twitter for iPad

Question

Twitter for iPad implements a fancy "pinch to expand paper fold" effect. A short video clip here. http://www.youtube.com/watch?v=B0TuPsNJ-XY

Can this be done with CATransform3D without OpenGL? A working example would be thankful.

Update: I was interested in the approach or implementation to this animation effect. That's why I offered bounty on this question - srikar

Solution 1

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;
}

Solution 2

Essentially, this effect is comprised of several different steps:

1. Gesture recognizer to detect when a pinch-out is occurring.
2. When the gesture starts, Twitter is likely creating a graphics context for the top and bottom portion, essentially creating images from their layers.*
3. Attach the images as subviews on the top and bottom.
4. As the fingers flex in and out, use a CATransform3D to add perspective to the images.
5. 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.

Solution 3

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.