Joris Kluivers

I like to build software.

Emulating the Google Maps Curl Animation

The curl animation is probably most well known from the iPhone maps application. The effect is used there to partially curl up the map to reveal the settings beneath. While the partial curl effect can’t be recreated entirely using the public iPhone SDK, it is possible to use the animation for other purposes.

How it works

The curl animation provided by the public iPhone SDK can only be used as a transtion. A transition is an animation that’s displayed in between changes to a container UIView. These changes would be adding or removing subviews for example. In case of the maps application the container view initially displays a map view. The changes made involve removing the map and adding the settings view. The curl effect curls the view state before the changes and reveals the same view reflecting the state after the changes. If no changes are made during the curl transition the transition would simply curl the current content and reveal the same content again.

A curl transition can be initiated by wrapping the changes to the container view in an UIView animation context:

1
2
3
4
5
6
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.5f];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:containerView cache:NO]
[mapView removeFromSuperview];
[contianerView addSubview:settingsView];
[UIView commitAnimations];