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.
