oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button Programming With Cocoa

Animating Graphics in Cocoa, Part 1


In today’s column I'm going to discuss animating graphics in Cocoa. I'll cover several new classes, including NSAffineTransform, NSTimer, and NSThread, as well as a new method of an old class, NSBezierPath.

Today's project presents us with nothing more than a ball bouncing around inside of our application’s window, which we will later expand upon with some user interface controls.

Before delving into the article, I need to go through the standard motions of creating the project and setting up the interface. First, create a new project named Animation. (Pretty original, eh?) To this project, add an Objective-C subclass of NSView named AnimationView by selecting New File… from the File menu and choose 'Objective-C NSView subclass' from the New File dialog.

Now to set up the interface. This is done in the same fashion we have learned about in the last two columns. Drag the file AnimationView.h from Project Builder into the nib window in Interface Builder; this will add AnimationView to the list of available classes in IB.

Next, drag onto the window an NSView container. From the Info panel, change the class of the view container from NSView to AnimationView. If this procedure is unfamiliar to you, refer back to the first graphics column. Save your work, and it's back to Project Builder.

Animation in a Nutshell

Learning CocoaLearning Cocoa
By Apple Computer, Inc.
Table of Contents
Sample Chapter
Full Description
Read Online -- Safari

Animation is really nothing more than a series of images (frames) in which there are subtle changes to those images, such as position movement between successive frames. Our job as programmers is to set up a system where we redraw our view repeatedly, while simultaneously effecting some small, incremental changes to our image. In the case of our bouncing ball application, we want to repeatedly call a method, called stepAnimation:, that moves the ball a little bit in some direction, and then tells the view to redraw itself.

To accomplish this we need two things: a way to time the animation, and a way to move the shapes. We will learn in a moment two different ways we can time the animation, as well as how we can easily move bezier paths around in our view. The first timing technique will use the class NSTimer, while the second technique will make use of the class NSThread. A class called NSAffineTransform provides us with the ability to move bezier paths. With that, let's look at the first of these classes, NSTimer.


An NSTimer object, or more succinctly, a timer, is an object that waits some amount of time and then sends some pre-determined message to a pre-determined object. NSTimer is a bigger beast than I’m letting on here, so read up on the class documentation in the Foundation reference.

A timer can be set to fire once, or it can be set to repeat on some time interval. What we'll do is create a timer object that fires every 0.04 seconds, which will give us an animation with approximately 24 frames per second. The method that is called when the timer is fired is a method called stepAnimation:, which we will add to our NSView subclass. Creating a timer is easy to do in the initialization of our view. The method we use to create a new timer is –scheduledTimerWithTimeInterval:target:selector:userInfo:repeats:. We will modify the default initWithFrame: method of AnimationView to create a timer object as follows:

- (id)initWithFrame:(NSRect)frame {
    NSTimer *timer;

    self = [super initWithFrame:frame];
    if (self) {
        timer = [NSTimer scheduledTimerWithTimeInterval:0.04 
    return self;

What we did here was to set the time interval to fire the timer every 0.04 seconds; the target object of the message sent by the timer is the view itself, and the method to be invoked is stepAnimation:. The method that is invoked by the timer must have exactly one argument that is type NSTimer *.

When a timer is fired, the message to the target object contains an argument that is the timer that sent off the message. In this way, we can get some information about the timer. The userInfo argument allows us to send any piece of information along with the timer object, which can then be retrieved by sending the timer (which is accessed via the argument of stepAnimation:) a -userInfo message. Finally, we tell the timer that it should reschedule itself everytime it is fired; i.e., repeat. With this, we have set up a first crucial component of making the animation work. Now we go onto to take a look at the stepAnimation: method and how we move things around.

Pages: 1, 2, 3, 4, 5

Next Pagearrow