iOS SDK: UIView Animations

This iOS Quick Tip will teach you how to easily animate objects with UIKit. Whether you need sliding menus or flying monkeys, it's easy to get it done, and this tip will show you how!

Animation in mobile applications can be a very important feature. From a practical, UX standpoint, it can let the user know that something has been changed or moved. From a more entertaining standpoint, it can move game sprites or tile maps around the screen, pulling the user into a fully interactive experience.

Fortunately, it's very easy to get UIView objects moving around in your iOS apps, and you don't even have to worry about calculating cryptic geometric equations or other such voodoo!

UIView Background

Before we get into the actual animation, we need to be familiar with the basic animation properties of UIView objects. The following is a list of all such properties as of iOS 5.1:

center (position on screen)
frame (position on screen, size, stretching…)
bounds (size, stretching)
alpha (transparency)
transform (rotation, scaling, basically any changes to the UIView)
backgroundColor

We don't have enough space in this quick tip to go over all of these properties, but we will look at a few of the most common ones: center, alpha, and transform.

Moving UIViews

[UIView animateWithDuration:(NSTimeInterval) animations:^(void)animations]

In its most basic form, the above is all you need to animate a UIView. It’s pretty straightforward- pass a duration (how long the animation will last), and then the properties to be animated (the values that you want the UIView’s properties to have at the end of the animation).

For a quick example, if we have a UIView called “theView”, and we want to make it fade away until it’s invisible within a .5 second duration, we would call:

[UIView animateWithDuration:0.5f
                            animations:^{
		                    [theView setAlpha:0.0f];
                            }
];

And we’re done! The duration of the animation is set by the animateWithDuration: parameter, and an Objective-C block of specific animation actions is supplied to the animations: parameter. It’s just that easy!

Post-Animation Actions

Often, we’ll want to do something after the animation finishes. We’ll take a game for example. Let’s say we want to show a player that they’ve successfully completed an action. We’ll do this by making a star fly up into the left corner of the screen, and then a point will be added to their score. There are two things we’ll want to do once the star is finished flying:

Remove the star from the screen (we only want one star visible per point).
Add a point to the score.

To do this, we’ll call our animation method with a completion block, like this:

[UIView animateWithDuration:(NSTimeInterval) 
                            animations:^(void)animations 
                           completion:^(BOOL finished)completion
];

For example, if we have a UIImageView (i.e. a subclass of UIView) called “starImageView”, with an image of a star, and some numeric variable called “points”, we would call:

[UIView animateWithDuration:0.7f 
                animations:^
                {
                        [starView setCenter:CGPointMake(0, 0)];
                } 
                completion:^(BOOL finished)
                {
                        [starView removeFromSuperView];
                        points++;
                }
];

It's worth noting that we’ll need to re-add our “starView” as a subview of our UIView if we want to run this animation again. You can see this in the sample code provided as an attachment to this Mobiletuts+ tutorial.

Going Beyond

Finally, there is a method that will let us define even greater detail on our animation process, including a delay before the animation runs, and setting the type of "easing" for our animation. These "easing" types can be found (and described) in the UIView.h header file as enums:

typedef enum {
    UIViewAnimationCurveEaseInOut,         // slow at beginning and end
    UIViewAnimationCurveEaseIn,            // slow at beginning
    UIViewAnimationCurveEaseOut,           // slow at end
    UIViewAnimationCurveLinear
} UIViewAnimationCurve;

I would encourage you to play around with those, by putting them into the "options" parameter of the following animation method:

[UIView animateWithDuration:(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions)animations:^(void)animations completion:^(BOOL finished)completion];

And once again, using our previous examples combined, we’ll delay our animation by 0.1 seconds, then begin moving it (slowly at first, then speeding up, and then going slowly again at the end). Also, while we’re moving our image, we’ll fade it out to 0% opacity. Finally, after our animation finishes, we’ll add a point to our score, and remove the image from our UIView.

[UIView animateWithDuration:0.6f 
            delay:0.1f 
            options:UIViewAnimationCurveEaseInOut 
            animations:^{
          	        [starView setCenter:CGPointMake(0, 0)];
           	        [starView setAlpha:0.0f];
            } 
            completion:^(BOOL finished){
                        [starView removeFromSuperview];
                        points++;
            }
];

Conclusion

As you can see, it’s super easy to get your UIViews animated, so take some time to play around with the different animatable UIView properties, and see what new things you can discover!

For extra practice, use the following command to rotate your image:

[starView setTransform:CGAffineTransformRotate(starView.transform, 90.0f)];

Now, see what other things are possible with animations for UIViews! And remember, there are several subclasses of UIView that can be animated with these same methods and properties, such as (but not limited to):

UIButton
UIImageView
UIButton
UILabel
UITableView
UIScrollView

Resources

The star image used in this tutorial was released with a GNU/GPL license from FindIcons

HIGHLIGHTS OF THE DAY