The iPhone has a set of nice transition animations which makes the experience using it very pleasant. But after a while one get so used of them that one stop noticing that they are even there. But this is not necessary a bad thing. Often I think that really good things doesn’t show at all, they don’t get in the way. In 3D application really good things make the experience so natural that one afterwards can wonder what the big deal was, really impressive 3D isn’t at all impressive. But, this is not about not noticing. After a while one maybe want to make that little extra in an iPhone app ie making a view transition more natural for the app. Some ebook readers have made page turning transitions.

I have for some time had the notion how to implement it, but as always, But frankly, nothing is really solved until it is shown to work. So, this weekend I set out to make a reusable class for a OpenGL ES based view transition animation.

My idea was basically as following

• Make a screen shot of the current view
• Create a texture of the screen shot
• Create a view with an OpenGL ES context, make it opaque=NO
• Make it reusable with a delegate protocol for animation parts

Said and done. So how did this work? I’d say it worked pretty good. Maybe there is better ways to go from screen shot to texture but the well used screen grabbing code is solid.

UIGraphicsBeginImageContext(view.bounds.size);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

A utility should be valued by how easy it is used. Too often I see OOP programmers making no effort at simplify a framework. Read about pseudo-classes. So how much has to be done to use this transition view? It boils down to two parts, the actual animation and the integration into Cocoa touch views. The actual animation calls are what they are, but I separated it into two delegate methods, setupTransition and drawTransitionFrame. Then creating the objects and make use of them can look like this (from the demo project using the Utility Application Xcode template).

- (IBAction)showInfo {     
    FlipsideViewController *controller = [[FlipsideViewController alloc] 
                                          initWithNibName:@"FlipsideView" 
                                          bundle:nil];
    controller.delegate = self;

    // Create animation delegate
    DemoTransition *transition = [[[DemoTransition alloc] init] autorelease];

    // Create animation view and feed the delegate
    EPGLTransitionView *glview = [[[EPGLTransitionView alloc] 
                                   initWithView:self.view
                                   delegate:transition] autorelease];
    [glview startTransition];

    // Animation will be run on top off next view 
    [self presentModalViewController:controller animated:NO];
    [controller release];
}

Update: Added features to include transition into next view, grabbing next view as a texture and making it available for the drawTransitionFrame method

Grab the source code and a Xcode demo project at github