iPhone Dev: Animating PNG Sequences

Question

What is the best or recommended technique for animating PNG Sequences.
Heres what I've learned:

Do it Manually
Using MutableArrays containing Strings, you can animate a UIImageView with a timer which increments an index number

UIImage - animation methods
This works, the only problem is to find if an image has completed its animation, you have to check the isAnimating BOOL, and to do that you need a timer.

What is the best and recommended?

Looking to do Oldschool game sprite animations, ie:

Idle Animation
Attack Animation
Walk Animation
ect...

Let me know if any one has something.

@lessfame

Answer 1

Example to animate arrows

    UIImage* img1 = [UIImage imageNamed:@"fleche1.png"];
    UIImage* img2 = [UIImage imageNamed:@"fleche2.png"];

    NSArray *images = [NSArray arrayWithObjects:img1,img2, nil];
    UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 160.0, 160.0)];
    [imageView setAnimationImages:images];
    [imageView setAnimationRepeatCount:100];
    [imageView setAnimationDuration:3.0];
    imageView.center = myView.center;


    [imageView startAnimating];
    [myView addSubview:imageView];
    [imageView release];

Answer 2

Easiest way is to use Core Animation layers to do sprite animation:

• Make a 'multi-cell' image strip (could be PNG or JPG) of all the various moves for the sprite. Make each 'cell' be a fixed height or width.

• Put the image in a UIImageView.

• Take the CALayer of the view, and adjust the contentsRect property of the layer. This acts as a clipping rectangle for the sprite. To animate sprite all you have to do is move the contentsRect over to the next cell position in the image strip.

Something like this will do it (assuming you've already calculated the newSpritePosition.

  [CATransaction begin];
  [CATransaction setDisableActions:YES];
  spriteLayer.contentsRect = newSpritePosition;
  [CATransaction commit];

(If you don't do the second line, then you'll get a default slide animation instead of a 'jump' to the next state.)

With this technique you can rotate through all the frames of the sprite -- much like a flipbook. CALAyer transactions are optimized so you should get pretty fast frame rates. You can set an animationDidStop completion handler to move to the next state of the sprite or loop back to the beginning frame.