javascript - 存储 requestAnimationFrame

Question

简要说明:

我制作了一个 requestAnimation，它可以根据计数器有 2 个回调；

其中一个回调将增加计数器，另一个回调将减少计数器(始终在特定范围 0//arr.length 内循环)。

一切都按预期进行，直到停止并重新启动动画，
这是激活并应该存储 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)

作为一种解决方法，我使用了 precidingCount var 并根据它是否增加来决定触发哪个 requestAnimationFrame 回调；

问题:

有人可以解释为什么仅仅存储和调用分配给 requestAnimation 的 var 并不能像我预期的那样工作吗？

是否有更好的模式来停止-重新启动 requestAnimation？

here's a working pen (查看问题评论第180到182行)_

Answer 1

每次勾选后，您必须重新请求动画帧。 requestAnimationFrame 与您需要取消的 setInterval 不同。

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);