Saturday, December 29, 2012

Simple animations in iOS

I'm re-learning objective-C and iOS programming, since I will be teaching a class this semester; I have created a simple animation example that might be useful to other people learning iOS.

There are basically two kinds of animation:

  1. cell-based animation, in which we replace an image with another image, like old cartoons were made, or like flip books; this gives us complete control of the animation, but requires us to draw each frame.
  2. property-based animation, in which we animate some properties of an object (like its location, its size etc), this is usually limited, in which we are animating the whole object, but it is a lot easier, since we do not need to draw each frame, but just need to specify the initial and final values for the properties.
We can create a very simple program to demonstrate both kinds; we will have a storyboard, with an UIImageView and two buttons, one to trigger each kind of animation. The video below shows the screen, and has a small demo.

We create a new project, single-view application, and then edit its storyboard (I do iPhone only for my simple projects :), add a UIImageView and two buttons; on its view controller, we add two properties (only one IBOutlet) and two IBAction methods, one for each button, as follows:

For the cell animation, I got a character sheet from OpenClipart, and cut it into a set of images (the images are not quite properly aligned, but they definitely exceed my artistic abilities :). You can get the images (and the whole project) from my github.
Notice we have an NSArray property for keeping the images for the cell animation, but it is not directly  hooked to the UI.

After we attach the ImageView (as a reference outlet) to the imgView property, and hook up the buttons to the corresponding methods, we go into the code.

In our viewDidLoad method we initialize the array of images:

And our method for cell animation is pretty simple; all we really need to do is set the animationImages property of the UIImageView, to an array of images, and then call startAnimating on the ImageView; we can also control the duration (in seconds), and how many times we want the animation repeated. The whole method is below:

Now, for the property animation, we need to choose a property which is animatable (from the documentation,  we can animate the frame, bounds, center, transform, alpha, backgroundColor and contentStretch properties). The frame property determines (along with some of the others :) where the UIImageView is drawn, so we create a new frame (you need to animate the whole property, can't animate pieces), and use UIView's animateWithDuration method (available since iOS 4); we need to pass it a block (using the ^ { ...} notation; anything between the braces {} is a block). There are several variations of this method, which allow you to control more of the animation). The code is as follows:

If you want to learn more about animations in iOS, Ray Wenderlich has a deeper tutorial,  Apple has all the documentation you'll ever need, and playing with the methods should be easy and fun.

No comments:

Post a Comment