There’s something about interface components that move
that make users take notice. They’re visually interesting, attract and
keep attention, and, on the iPhone’s touch screen, are fun to play with. We take advantage of both of our new UI
elements (and some old friends) to create a user-controlled animation.
Implementation Overview
As mentioned earlier, image
views can be used to display image file resources and show simple
animations, whereas sliders provide a visual way to choose a value from a
range. We’ll combine these in an application we’re calling ImageHop.
In ImageHop, we’ll be creating a looping animation using a series of images and an image view instance (UIImageView). We’ll allow the user to set the speed of the animation using a slider (UISlider).
What will we be using as an animation? A hopping bunny. What will the
user control? Hops per second, of course! The “hops” value set by the
slider will be displayed in a label (UILabel). The user will also be able to stop or start the animation using a button (UIButton).
Figure 1 shows the completed application in use.
We should discuss two pieces of this project before getting too far into the implementation:
First, image view
animations are created using a series of images. I’ve provided a
20-frame animation with this project, but you’re welcome to use your own
images if you prefer.
Second,
although sliders enable users to visually enter a value from a range,
there isn’t much control over how that is accomplished. For example, the
minimum value must be smaller than the maximum, and you can’t control
which dragging direction of the slider increases or decreases the result
value. These limitations aren’t show-stoppers; they just mean that
there may be a bit of math (or experimentation) involved to get the
behavior you want.
Setting Up the Project
Begin this project in the same way as the last. Launch Xcode (Developer/Applications), and then choose File, New Project.
Select the iPhone
OS Application project type, and then find and select the View-Based
Application option in the Template list on the right. Click Choose to
continue, enter the project name ImageHop, and save the new project.
Adding the Animation Resources
This project makes use of 20 frames
of animation stored as PNG files. The frames are included in the Images
folder within the ImageHop project folder.
Because we know up front that
we’ll need these images, drag them into the Xcode project’s Resources
folder, being sure to choose the option to copy the resources if needed.
Preparing the Outlets and Actions
In this application, we need to provide outlets and actions for several objects.
For outlets, first we need the image view (UIImageView), which will contain the animation and be referenced through the variable imageView. The slider control (UISlider) will set the speed and will be connected via animationSpeed, while the speed value itself will be output in a label named hopsPerSecond (UILabel). A button (UIButton) will toggle the animation on and off and will be connected to an outlet toggleButton.
By the Way
Why
do we need an outlet for the button? Shouldn’t it just be triggering an
action to toggle the animation? Yes, the button could be implemented
without an outlet, but by including an outlet for it, we have a
convenient way of setting the button’s title in the code. We can use
this to change the button to read “Stop” when the image is animating or
“Start” when the animation has stopped.
For actions, we need only two: setSpeed will be the method called when the slider value has changed and the animation speed needs to be reset, and toggleAnimation will be used to start and stop the animation sequence.
Go ahead and define these
outlets and actions as outlets and actions within
ImageHopViewController.h. You’ll also want to declare the four outlet
variables as properties so that we can easily access them in the view
controller code. Listing 1 shows the resulting header file.
Listing 1.
1: #import <UIKit/UIKit.h>
2:
3: @interface ImageHopViewController : UIViewController {
4: IBOutlet UIImageView *imageView;
5: IBOutlet UIButton *toggleButton;
6: IBOutlet UISlider *animationSpeed;
7: IBOutlet UILabel *hopsPerSecond;
8: }
9:
10: @property (retain,nonatomic) UIImageView *imageView;
11: @property (retain,nonatomic) UIButton *toggleButton;
12: @property (retain,nonatomic) UISlider *animationSpeed;
13: @property (retain,nonatomic) UILabel *hopsPerSecond;
14:
15: -(IBAction)toggleAnimation:(id)sender;
16: -(IBAction)setSpeed:(id)sender;
17:
18: @end
|
For all the properties you’ve defined in the header file, add an @synthesize directive in the ImageHopViewController.m implementation file. Your additions should fall after the @implementation line and look like this:
@synthesize toggleButton;
@synthesize imageView;
@synthesize animationSpeed;
@synthesize hopsPerSecond;
Make sure that both the ImageHopViewController
header and implementation files have been saved, and then launch
Interface Builder by double-clicking the ImageHopViewController.xib file
within the project’s Resources folder.
After
it has loaded, switch to the Document window (Window, Document), and
double-click the view icon to open it and begin editing.
