Transition Effects In iOS Apps

One of the more visually appealing aspects of iOS development is the crisp transition effect. Whenever you see a beautiful iOS app, it has all the elements interacting with each other seamlessly with gorgeous transitions and other visually appealing effects. If you have tried your hand at building one of these apps, you must have noticed that there are a couple of default options available, like flip or curl. But how do we go past this? How do we build all the fancy transition effects into our app? There are actually two different approaches you can follow.  

UIView Animations only

Here, we use UIView‘s transitionFromView:toView:duration:options:completion: selector before pushing the controller (with the animation flag set to NO), like the following:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationTransition:UIViewAnimationOptionTransitionCurlD                              own forView:self.imageView cache:NO];
[UIView setAnimationDuration:1.0f];
NSString* filename = [NSString stringWithFormat:@"imageName.jpg"];
self.imageView.image = [UIImage imageNamed:filename];
[UIView commitAnimations];

This is pretty straightforward and might be good enough for most projects as the options parameter gives you some nice transitions by default. The default list is given below:

• UIViewAnimationOptionTransitionNone
• UIViewAnimationOptionTransitionFlipFromLeft
• UIViewAnimationOptionTransitionFlipFromRight
• UIViewAnimationOptionTransitionCurlUp
• UIViewAnimationOptionTransitionCurlDown
• UIViewAnimationOptionTransitionCrossDissolve
• UIViewAnimationOptionTransitionFlipFromTop
• UIViewAnimationOptionTransitionFlipFromBottom

One key aspect is to note that you have to commit the animations in the end using “commitAnimations”. Now let’s move to the next level. Sometimes, you may want to include more radical animations into your app, and that’s when CoreAnimation comes into picture.

Using CoreAnimation

This approach uses CoreAnimation explicitly with a CATransaction as given below:

CATransition *transition = [CATransition animation];
                transition.timingFunction = [CAMediaTimingFunct                    ion functionWithName:kCAMediaTimingFunctionEaseIn];
transition.duration = 1.0f;
transition.type = @"rippleEffect"; 
transition.subtype = @"fromTop";
[UIView setAnimationTransition:(int)transition forView:self.imageVi                                                      ew cache:NO];
[UIView setAnimationDuration:1.0f];
[[self.imageView layer] addAnimation:transition forKey:nil];
NSString* filename = [NSString stringWithFormat:@"imageName.jpg"];
self.imageView.image = [UIImage imageNamed:filename];
[UIView commitAnimations];

First thing to note is that you will have to include the QuartzCore framework in your project. To do this, click on your project name in the Navigator bar. In the “Build Phases” tab, expand “Link Binary With Libraries”. Select the “+” button and add the QuartzCore framework. Also, don’t forget to add the line “#include <QuartzCore/QuartzCore.h>” in the class where this code is used.

There are several aspects that this approach differs from the first one. The main one is that the first one results in a code that looks a lot cleaner the the CoreAnimation one, but there is a big trade-off as CoreAnimation opens the gate to several really cool transitions like “rippleEffect”, “suckEffect”, “cube”, and others. Here is a list of some of the possible effects.

• cameraIris
• cube
• fade (kCATransitionFade)
• moveIn (kCATransitionMoveIn)
• oglFlip
• pageCurl
• pageUnCurl
• push (kCATransitionPush)
• reveal (kCATransitionReveal)
• rippleEffect
• suckEffect
• genieEffect

————————————————————————————————-