Home / iPhone Tips and Tutorials

---

Adding Animation and Sound to Your App

In this article, you find out how to make the car move up the screen, turn around, and move back to its original position - and with appropriate sound effects.

Also show you how to drag the car on the screen to position the ride from wherever you'd like. And to add just a little more pizazz, show you how to make the TestDrive button blink.

This article provides you with a very good base for understanding animation and sound, and explains how to manage touches on the screen.

Understanding Animation on the iPhone

Fortunately, most of what you need to do as far as animation is concerned is already built into the framework. Some view properties are animatable (the center point, for example), which means that you just need to tell the view where to start, where to end, and a few other optional parameters, and you're done. The view will take care of moving the image. To give you some context in which to understand how animation on the iPhone works, explain a little more about views, their properties, and the coordinate systems on the iPhone.

View geometry and coordinate systems

The default coordinate system in UIKit has its origin in the top-left corner and has axes that extend down and to the right from the origin point. Coordinate values are represented using floating-point numbers, and you don't have to worry about the screen resolution; the frameworks take care of that automatically. In addition to the screen coordinate system, views define their own local coordinate systems that allow you to specify coordinates relative to the view instead of relative to the screen.

Because every view and window defines its own local coordinate system, whenever you are drawing or dealing with coordinates, you'll need to pay attention to which coordinate system you are using. That sounds ominous, but it's really not after you get into the rhythm of working with the coordinate systems.

Points versus pixels

In iOS, all coordinate values and distances are specified using floating-point values in units referred to as points. The measurable size of a point varies from device to device and is largely irrelevant. The main concept to understand about points is that they provide a fixed frame of reference for drawing. For example, the screen dimensions (width x height) for the iPhone and iPod touch is 320 x 480 points and the iPad is 768 x 1024 points.

So although an iPhone with a retina display has a 960-by-640-pixel resolution (pixel density of 326 pixels per inch (ppi)) and a nonretina's display has a 480-by-320 pixel resolution (163 ppi screen), as long as you design your interface to fit the screen sizes in points, your views will display correctly on the corresponding type of device.

So don't worry about the resolution; concentrate on points and you'll be fine.

View's size and position

A view object's location in a coordinate system is determined using either its frame or its center properties.

• The frame property contains the frame rectangle, which specifies the size and location of the view in its super view's coordinate system.
• The center property contains the known center point of the view in its super view's coordinate system.
• The bounds property contains the bounds rectangle, which specifies the size of the view (and its content origin) in the view's own local coordinate system.

The frame of the main view with an origin of x=0.0 and y=20.0. Its size is width = 320.0 and height = 460.0 The reason that its origin is y=20 is that its frame is in its window coordinates (its super view) and it has to share the window with the status bar which is, as you might deduce, is 20 pixels high.

There are some data structures you need to understand as you work with views.

The frame is a CGRect - a struct with an origin and a size that are comprised of CGPoints. The following code shows the CGRect struct.

struct CGRect {
  CGPoint origin;
  CGSize size;
};

An origin is a CGPoint with an x and y value, and a CGSize is a CGPoint with a width and height value. The following code shows the CGPoint struct.

struct CGPoint {
  CGFloat x;
  CGFloat y;
};

struct CGSize {
  CGFloat width;
  CGFloat height;
};

Similarly, the center property is a CGPoint. And that's all you need to know about the data structures you will be using.