Sprite Animation Best Practices

I'd like to get a better handle on how people in the real world are handling their animation.

Do you load 1 large image and then draw different rectangles based on the animation frame?

Do you load X image files into an array and draw the item in the array based on the animation frame?

How do you handle having different lengths of animations for various sprites.

Say a character walking takes 4 - 8 frames, and the waves on the beach only take 2 - 3 frames. How would you handle that situation? See Below

Dim Waves(1) as Sprite
Dim Char(5) as Sprite

Sub Animate()
     Frame += 1
     Draw Char(Frame)

     Draw Waves(Frame)
     If Frame = 5 Then Frame = 0
End Sub

Obviously Waves would end up with an out of bounds error.

Or do you have your sprite worry about it's own animation, and not care about the frame at all. Having each sprite know its own animation loop?

Answer

The way I've done it in the past is by separating the animation data from animation playback. An Animation can then become basically an array of Frames and a few properties that describe how the animation should behave (if it loops, etc).

I typically load one image and draw pieces of it.

Each Frame of the animation is essentially a rectangle and a length of time. This allows for some frames to display longer than others, which may or may not be something you want. If you want all of the frames in your animation to display for the same length of time, store that in your Animation object.

Anything that needs to play an animation has its own AnimationPlayer which can be pointed to an Animation. The player object takes care of playing the animation and makes the "current frame" available.

The advantage to this for me was that I could have a single instance of an Animation that many objects could point to and be playing different parts at the same time. It was also easy to change animations by simply pointing the AnimationPlayer to a different Animation object and resetting the playback.

Edit: Here's a fairly basic JavaScript implementation of the system described above. I threw it together in a few minutes as a demonstration. "Real" code would have more features. You'll need a modern browser that supports both Canvas and Data URI for it to work, though.