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, High school drop-out. College drop-out. A go-go dancer in Amsterdam. LOVED computers, programmed satellites for AT&T. Founded IPSOFACTO in 1996, Y2K boom, Dot-Com boom, 2.0 boom. Likes his smallish company and human relationships; not into big anonymous IT. Loves to tell jokes. Loves and Hates technology; pick up the phone, ok? Thinks on line hook up sites have saved the world from AIDS and DateRape. Thinks his kids are better collaborators and world leaders thanks to video games. Is still a hip-hop dancer; is NOT a Brony. Loves San Francisco; Hates the homeless crisis. Tells young people to buy real estate, as soon as possible. Don’t rent. Hopes his final years are spent handing out blankets, food, clothes, and medical supplies.