Full frame animation using setInterval()

[rbrodt]

I'm trying to implement an animation using setInterval() by swapping sequential frames into an <image> element. The animation is started with an onclick event on the watch face. Something like this:

const startFrame = 1;
const endFrame = 40;
var currentFrame;

watchface.onclick = function(e) {
  startAnimation();
}

function startAnimation(at) {
  stopAnimation();
  currentFrame = startFrame;

  setInterval(function() {
    image.href = "frames/" + currentFrame + ".png";
    if (currentFrame >= endFrame)
      stopAnimation();
    else
      ++currentFrame;
  }, 200);
}

function stopAnimation() {
  clearInterval();
  currentFrame = startFrame;
}

This works just fine for the first few times the animation is run, but then appears to be getting faster and faster. After about 10 iterations, the animation is so fast that the individual frames don't appear long enough to recognize the entire sequence. It's almost as if the setInterval() delay period is getting shorter every time it's called. What am I missing?

Thanks!

Bob

[rbrodt]

Update on this issue:

* I'm seeing the same effect even if I set the interval to 1000ms - i.e. the animation runs too quickly to see the individual frames.

* If I leave the display off for a few hours on the real Versa hardware, the animation starts off normally again and speeds up with each iteration as before.

[JonFitbit]

setInterval probably isn't the best for this type of animation. Check out the sprite image component, I think you'll have better luck:

https://dev.fitbit.com/build/guides/user-interface/svg-components/other/#sprite-image

[rbrodt]

Thanks for the hint! Still, I wonder why setInterval() doesn't work as advertised - is this a bug?

[gregoire · Accepted solution]

Your clearInterval() actuallt doesn't clear anything, so every time you call startAnimation, a new interval is created but the previous one is still there.

clearInterval takes a parameter which is the id of the interval you want to clear.

And this id is returned by the setInterval(..) call.

var intervalId = 0

function startAnimation(at) {

  intervalId = setInterval(fun, 200)

}

function stopAnimation() {

  clearInterval(intervalId)

}

see example here https://www.w3schools.com/jsref/met_win_clearinterval.asp

[rbrodt]

D'oh! Thanks for clearing that up.