Performing Simple Animations using NSTimer class

Here is a simple tip on how we can perform simple animation on objects in Xcode using the NSTimer class to create timers that call methods at regular intervals.

Using the NSTimer class –

There are many ways to perform simple animations. One of the easiest ways to perform animation is to use the NSTimer class. The NSTimer class creates timer objects, which enable you to call a method at a regular time interval. It also allows you to update the position of an image at regular time intervals.

Displaying a bouncing ball on the screen using the NSTimer class. When the ball touches the sides of the screen, it bounces off in the opposite direction.

Animating a Ball

1. Using Xcode, create a new Single View Application (iPhone) project and name it as Animation.

2. Drag and drop an image named baseball.jpg to the Supporting Files folder in Xcode.

3. When the Add dialog appears, check the Copy Item into the Destination Group’s Folder option so that the image is copied into the project.

4. Select the AnimationViewController.xib file to edit it in Interface Builder.

5. Drag and drop an Image View onto the View window and set its Image property to baseball.

6. Ensure that the size of the Image View accommodates the entire baseball image.

7. Move the Image View on the screen, so it is important not to fill the entire screen with the Image View.

8.Select the View (outside the Image View) and change the background colour to black. Add a Label and a Slider from the Library onto the View window. Set the Current property of the Slider view to 0.01. After this declare the outlets, fields and actions in the AnimationViewController.h file as below.

#import <UIKit/UIKit.h>
@interface AnimationViewController: UIViewController
{
IBOutlet UIImageView *imageView;
IBOutlet UISlider *slider;
CGPoint delta;
NSTimer *timer;
float ballRadius;
}
@property (nonatomic, retain) UIImageView *imageView;
@property (nonatomic, retain) UISlider *slider;
-(IBAction) sliderMoved:(id) sender;
@end

Back in Interface Builder, connect the outlets and actions as –

➤Control-click and drag the File’s Owner item to the Image View and select imageView.
➤Control-click and drag the File’s Owner item to the Slider and select slider.
➤Control-click and drag the Slider to the File’s Owner item and select sliderMoved

Add the following statements to the AnimationViewController.mfile –

#import “AnimationViewController.h”
@implementation AnimationViewController
@synthesize imageView;
@synthesize slider;
-(void) onTimer {
imageView.center = CGPointMake(imageView.center.x + delta.x, imageView.center.y + delta.y);
if (imageView.center.x>self.view.bounds.size.width – ballRadius || imageView.center.x < ballRadius)
delta.x = -delta.x;
if (imageView.center.y > self.view.bounds.size.height – ballRadius || imageView.center.y < ballRadius)
delta.y = -delta.y;
}
– (void) viewDidLoad {
ballRadius = imageView.bounds.size.width / 2;
[slidersetShowValue:YES];
delta = CGPointMake(12.0,4.0);
timer = [NSTimer scheduledTimerWithTimeInterval:slider.value
target:self
selector:@selector(onTimer)
userInfo:nil
repeats:YES];
[superviewDidLoad];
}
-(IBAction) sliderMoved:(id) sender {
[timer invalidate];
timer = [NSTimer scheduledTimerWithTimeInterval:slider.value
target:self
selector:@selector(onTimer)
userInfo:nil
repeats:YES];
}

Press Command-R to test the application on the iPhone Simulator. The base ball should now be animated on the screen.

How It Works-
When the view is loaded, the first thing you do is get the radius of the baseball, which is half the width of the image:

ballRadius = imageView.bounds.size.width / 2;

This value is used during the animation to check whether the base ball has touched the edges of the screen. To set the slider to show its value, you used the setShowValue: method:[slider setShowValue:YES];

Also initialize the delta variable:
delta = CGPointMake(12.0,4.0);

The delta variable is used to specify how many pixels the image must move every time the timer fires.The preceding code tells it to move 12 points horizontally and 4 points vertically. You next called the scheduledTimerWithTimeInterval: target:selector:userInfo:repeats: class method of the NSTimer class to create a new instance of the NSTimer object:
timer = [NSTimer scheduledTimerWithTimeInterval:slider.value
target:self
selector:selector:@selector(onTimer)
userInfo:nil
repeats:YES];

The scheduledTimerWithTimeInterval: parameter specifies the number of seconds between firings of the timer. Here, you set it to the value of the Slider view, which accepts a value from 0.0 to 1.0. For example, if the slider’s value is 0.5, the timer object will fire every half-second.
The selector: parameter specifies the method to call when the timer fires, and the repeats: parameter indicates whether the timer object will repeatedly reschedule itself. In this case, when the timer fires, it calls the onTimermethod.

In the onTimer method, change the position of the Image View by setting its centre property to a new value. After repositioning, checked whether the image touches the edges of the screen; if it has, the value of the delta variable is negated:

-(void) onTimer {
imageView.center = CGPointMake(imageView.center.x + delta.x, imageView.center.y + delta.y);
if (imageView.center.x >self.view.bounds.size.width – ballRadius || imageView.center.x < ballRadius)
delta.x = -delta.x;
if (imageView.center.y > self.view.bounds.size.height – ballRadius || imageView.center.y < ballRadius)
delta.y = -delta.y;
}

When you move the slider, the sliderMoved: method is called. In this method, you first invalidated the timer object and then created another instance of the NSTimer class:

-(IBAction) sliderMoved:(id) sender {
[timer invalidate];
timer = [NSTimer scheduledTimerWithTimeInterval:slider.value
target:self
selector:
@selector(onTimer)
userInfo:nil
repeats:YES];
}
Moving the slider enables you to change the frequency at which the image is animated.