Using view transitions will give a lot of beauty to your entire application. So far there are implemented 4 transitions:

• Curl Up (UIViewAnimationTransitionCurlUp) – check Maps application on iPhone, but it’s not best example. Simply: page flip; curls a view up from the bottom
• Curl Down (UIViewAnimationTransitionCurlDown)
• Flip from right (UIViewAnimationTransitionFlipFromRight) - execly the same like in Weather app when you press info button; flips a view around a vertical axis
• Flip from left (UIViewAnimationTransitionFlipFromLeft)

The code for setting a view transition is almost the same like for any other animation, here is the example:

	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:1.5];
	[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:placeholder cache:YES];
	[view1 removeFromSuperview];
	[placeholder addSubview:view2];
	[view2 removeFromSuperview];
	[placeholder addSubview:view1];
	[UIView commitAnimations];

I have a view called placeholder and it’s added as a part of self.view of the view controller. view1 and view2 are two different views I want to transit go from view1 to view2 and vice verse. placeholder is of the same size as both view1 and view2. During this animation / transition placeholder flips around hiding view1 and revealing view2. During the transition, everything what is below placeholder is partialy visible. The animation takes 1.5 seconds as u set in setAnimationDuration.

Please note #1:
It’s only an animation, not real rotation / flip of placeholder let’s say it an optical illusion. UIView (what placeholder is) doesn’t have something like back and front side. view1 after transition is not hidden behind the placeholder, it has been removed, and you still see the front side of placeholder although it’s covered by view2, which is a placeholder’s subview.

Please note #2:
Unfortunately you can’t see the curl up / down transition on iPhone Simulator, it looks like fade, but it really works on real device.

Please note #3:
If view that animate’s in my case placeholder (yes placeholder animates, view1/view2 are only added/removed) is bigger than view1/view2 you will always see front site of that part although it will animate too.

Please note #4:
If you see annoying white part during animation, simply add something black below the placeholder – another view or image for example.

Fade transition

As I told you there are only 4 transitions, but many are curious how to make the fade transition. It’s very easy, simply create a normal animation which will change the alpha property for both views:

[placeholder addSubview:view2];
[placeholder addSubview:view1];

	view2.alpha = 0;
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:1.5];
	view1.alpha = 0;
	view2.alpha = 1;
	[UIView commitAnimations];

I prepared for you a project you can download and test Curl Up, Curl Down, Flip From Right, Flip From Left, Fade and also Flip From Left again but along the self.view, not placeholder.

Download the project

• Previous Entry: Status bar
• Next Entry: Creating a view programmatically