Animations on iPad

Animations on iPad

Well used, animations can improve the user interface, but it’s also a good way to give more time to your app for some actions.

For instance, our IPSOFACTO official app use a fade-in effect to switch graciously from the IPSOFACTO logo to the list of articles that match your query.

Another app we are currently developing use the same fade-in to download images and display them without blinking the UI.

Switch from a view to another

The Apple documentation provides this snippet :

[UIView transitionWithView:containerView
   duration:0.2
   options:UIViewAnimationOptionTransitionFlipFromLeft
   animations:^{ [fromView removeFromSuperview]; [containerView addSubview:toView]; }
   completion:NULL];

In this sample, we want to change the current view with a flip effect. So what we want to do in fact is just : remove the current view, add a sub view, and an animation between these two states.

The line 4 is exactly that. As you can see, we remove a view from its parent (let’s say that fromView is container.view) and add a sub view to containerView.

If we use these two lines directly we will blink the interface from one view to the other.

An animation is missing.

The static method transitionWithView of UIView will give us this animation. This command uses a subject (containerView), an action([fromView removeFromSuperview]; [containerView addSubview:toView];), a duration (0.2) and finally the animation type (UIViewAnimationOptionTransitionFlipFromLeft).

The method transitionWithView will basically uses the subject view (containerViewhere), apply the animation we choose and in the meantime do the action (remove a view and add the other).

There is a few other animations in the UIView Class Reference Documentation.

Another way to animate a change is to use the block begin/commit animation :

imageView.alpha=0;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.4];
imageView.alpha=1;
[UIView commitAnimations];

Here we want to change the alpha of our imageView (fade-in).

The block between [UIView beginAnimations:nil context:NULL]; and [UIView commitAnimations]; will be animated in 0.4 seconds. I you come from a Javascript background, it’s similar to the animate function of jQuery.

Present view

Another type of animation is about presenting a modal view.

[self presentModalViewController:modalView animated:YES];

Changing the default animation is really easy. You just have to set the animation type on the presented view with :

modalView.modalTransitionStyle=UIModalTransitionStyleCoverVertical

More fancy animations are available in the UIView Documentation.

Animations on iPad are really easy, allowing you to build high quality User Interface. The difficulty is to build a great user experience.

mm
Steve Boullianne, Multiple post-graduate degrees, Mind/Body/Spirit enthusiast. 139 IQ & Mensa. Loves Skiing, Scuba, and Food. Steve’s First job out of college was programming satellites for AT&T. Founded IPSOFACTO in 1996, Y2K boom, e-Commerce super success, 2.1 boom. Steve is ready to Mediate high quality for all life, our one planet, and human kindness. Loves to dance and tell jokes. Steve believes that Excellent Communication is key to human success (and failure). Steve has 3 sons who are his STARS. They will carry the world into a brilliant future. Since 1996, Steve has been a volunteer drug and alcoholism counselor in the Bay Area. The power of the Great Spirit is in you. Steve is a good friend to have.