maioman maioman - 6 months ago 20
Javascript Question

storing requestAnimationFrame

Brief explanation:

I've made a requestAnimation which alternatively has 2 callbacks depending on counter;

one of the callbacks will increment counter and the other will decrease it (always looping inside a certain range

0
//
arr.length
).

Everything works as expected until stopping and restarting the animation,

this is the code that activates and should store the requestAnimationFrame (
click()
):

function start() {
if (!spiral) {
spiral = window.requestAnimationFrame(animation);
}
}

function click() {
if (spiral) {
var trackSpiral = spiral;
spiral = undefined;
window.cancelAnimationFrame(spiral);

} else {

spiral = trackSpiral;
/* (count > precedingCount || count == 0 ) ?
spiral = requestAnimationFrame(animation) :
spiral = requestAnimationFrame(animationReverse);*/
}
}
window.addEventListener('load', start)

window.addEventListener('click', click)


As a workaround I've used a
precidingCount var
and depending on whether if it's increasing or not it can decide which requestAnimationFrame callback to fire;

Questions:

Can somebody explain why just storing and recalling the
var
assigned to requestAnimation doesn't work as I'd expect?

Is there a better pattern to stop-restart requestAnimation?

here's a working pen (to see the issue comment lines from 180 to 182)_

Answer

After each tick, you must re-request the animation frame. requestAnimationFrame is not something like setInterval that you need to cancel.

var animating = false;

function tick() {
    if (!animating) return;
    animate();                          // do one step of animation
    window.requestAnimationFrame(tick); // request next frame
}

function click() { if (animating = !animating) tick(); }

window.addEventListener('load',  click);
window.addEventListener('click', click);