Sprite animation problem

Question

I have this sprite I have to animate. The sprite is 7 images total but animation is 10 frames (2 positions are repeated).

The order I want to go through the frames is like this:

3 -> 4 -> 5 -> 6 -> 4 -> 3 -> 2 -> 1 -> 0 -> 2.

My problem is how can I skip 1 frame once I reach the end of each direction? The reason I want to skip is to save me from creating duplicate positions in the spritesheet.

I'm doing this in Javascript.

Answer 1

1. Record your animation sequence into array;
2. Remember the step you show at this frame;
3. When next frame is prepared make the step increase, if step becomes more than animation length - set it to 0 again;
4. Now you have looped animation.
5. List item

---

AnimStep: Byte;
AnimSprite: array [3, 4, 5, 6, 4, 3, 2, 1, 0, 2];
AnimLength: Byte;
Render
{
  ..
  AnimStep = (AnimStep + 1) mod AnimLength;
  RenderSprite(AnimSprite[AnimStep]);
  ..
}

Answer 2

var animationSequence = [3, 4, 5, 6, 4, 3, 2, 1, 0, 2];
var currentFrame = 0;
var totalFrames = animationSequence.length;

// to advance a frame which will wrap round once it reaches the end
currentFrame = (currentFrame + 1) % totalFrames;

// to get current frame
var animationFrameToPlot = animationSequence[currentFrame];

An example to see it working in jsFiddle