Memention Blog

Bells And Whistles

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

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.

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

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] 
    controller.delegate = self;

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

    // Create animation view and feed the delegate
    EPGLTransitionView *glview = [[[EPGLTransitionView alloc] 
                                   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

By Edward Patel, 28 Feb 2010

Show comments


Getting there13 Mar 2014
Throwing pebbles12 Jul 2013
Provision this!30 Aug 2012
Break what?18 Aug 2011
That old thing04 May 2011
Removing a Step15 May 2010
Make It Work22 Feb 2010
KISS server31 Jan 2010
tig on Mac12 Dec 2009
The XML Runner31 Oct 2009
Get some software from Memention
Powered by Jekyll and Disqus.
Copyright © 2010-2013 Memention AB