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.

1 comment:

  1. Thank you for the illustration on how to do flip book animation. I used your code examples to animate my own creation and it worked just fine. I believe that I can do the same thing using blocks (ˆ).

    My quest is to apply this type of animation to my app project. It is a comic book based on the page view template supplied in Xcode. But I replaced the calendar theme with a comic book theme. Each page has a grid of 12 views - 3 across & 4 down. Each view has a .png file showing my character as he struggles with his existence.

    The number of pages in my comic and the number of views on each page are controlled with NSArrays.

    It works just fine. But it is your typical comic book, just a bunch of still drawings lined up to tell a story. What I want to do is duplicate what I did in the single view app that I created based on your code to the second, and fifth page of my comic.

    The first page is the cover. Just one big .png file. When the reader swipes to turn the page, I want the animation to automatically start. It goes through the animation cycle just once and ends up looking like the rest of the comic - a grid of 12 views. I'm sure it can be done but I am just not getting anywhere. (As you can tell, I'm a beginner.)

    In your opinion, can this be done in a page based application? If it can, can you point me to a reference that can help me create this effect?