What is the best way to make a bouncing ball animation with infinite loop on iPhone?

Question

I am developing an iPhone game in which birds bounce.

I have set up the images for animating the wings of the flying bird like this:

[imgBird[i] setAnimationImages:birdArrayConstant];
[imgBird[i] setAnimationDuration:1.0];
[imgBird[i] startAnimating];

Now how I make the bird move is to use an NSTimer to fire every 0.03 seconds which adds/subtracts 1 from the x or y coordinate from imgBird[i].center.

I learnt about doing it like this from here. http://icodeblog.com/2008/10/28/iphone-programming-tutorial-animating-a-ball-using-an-nstimer/

But the issue is the birds slow down as soon as another timer (for moving my ship the same way) fires and returns back to original speed as i stop moving the ship.

Is there a better way to keep the bird moving except NSTimer?

The movement of bird is an infinite loop.

Answer 1

You will need to import CoreGraphics and the QuartzCore frameworks into you project.

Add these lines to the top of your file.

#import <QuartzCore/QuartzCore.h>
#import <CoreGraphics/CoreGraphics.h>

...

UIImageView *bird = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bird2.png"]];

CALayer *b = bird.layer;

// Create a keyframe animation to follow a path to the projected point

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"scale"];
animation.removedOnCompletion = NO;


// Create the path for the bounces
CGMutablePathRef thePath = CGPathCreateMutable();

// Start the path at my current location
CGPathMoveToPoint(thePath, NULL, bird.center.x, bird.center.y);
CGPathAddLineToPoint(thePath, NULL,20, 500.0);

/*  // very cool path system.
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,74.0,74.0);

CGPathAddCurveToPoint(thePath,NULL,74.0,500.0,
                      320.0,500.0,
                      320.0,74.0);
CGPathAddCurveToPoint(thePath,NULL,320.0,500.0,
                      566.0,500.0,
                      566.0,74.0);
*/

//animation.rotationMode = kCAAnimationRotateAuto;

animation.path = thePath;

animation.speed = 0.011;
//animation.delegate = self;
animation.repeatCount = 1000000;

// Add the animation to the layer
[b addAnimation:animation forKey:@"move"];

Hope that helps a bit.

Answer 2

From your question it seems you are using more than one timer. Use just one to animate all your objects. Somewhere, when your app starts, have this:

[NSTimer scheduledTimerWithTimeInterval:0.03 target:self selector:@selector(mainLoop:) userInfo:nil repeats:YES];

Then, in main loop, something like this:

- (void)mainLoop:(NSTimer *)timer
{
    // compute new position for imgBirds
    for (int i=0; i<kBirdCount; i++)
    {
        imgBirds[i].center = CGPointMake(somex, somey);
    }

    // compute new position for ship
    ship.center = CGPointMake(somex, somey);
}

Also, you should compute somex and somey as a function of your timer interval. In that way, if you change it, your animation will still look the same.

Answer 3

You'll want to use Core Animation instead of manually moving the birds. Take a look at CAAnimation in the docs. You basically set up an animation, the path you want it to move along, and just tell it to run. It'll take care of the rest. It also has support for easing which will make the pace slow down and accelerate so it looks more natural.