存储 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

每次 tick 后，您必须重新请求 动画帧。 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);

Answer 2

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

您需要在函数之外声明 var，如果 var 仅在函数中声明，则它仅限于该范围。

有没有更好的停止-重启requestAnimation的模式？

您需要继续 stop/start，只是不要请求下一帧。对于存在无限循环的情况，您可能想要使用 cancelAnimationFrame;

(function rAF(){
    // animate .... call again
    rAF_id = window.requestAnimationFrame(rAF)
}();
// .. wait ... cancel
setTimeout( window.cancelAnimationFrame(rAF_id), 5000)

以下代码应开始 forwardAnimation、停止 forwardAnimation、开始 reverseAnimation、停止 reverseAnimation 并重复。

(function(callback1, callback2, animating) {

  callback = callback1;

  function click() {
    if (animating = !animating) {
      callback = callback !== callback1 ? callback1 : callback2;
      (function loop() {
        rAF = window.requestAnimationFrame(loop);
        callback();
      })();
    } else {
      window.cancelAnimationFrame(rAF);
    }
  }

  window.addEventListener("load", function load() {
    click();
    window.removeEventListener("load", load);
    window.addEventListener('click', click);
  });
}(forwardAnimation, reverseAnimation));

Working Example

SVG Vertigo（未完成）

Answer 3

我认为您的方法与一般用法不同。我建议在需要时调用它而不是 start/stop.

我在创建动画库时学到了这个教训，它非常简单而且很小

https://github.com/allenhwkim/jsanimation

用法

import {slideInRight} from 'jsanimation';
slideInRight(el);

存储 requestAnimationFrame

storing requestAnimationFrame

javascript

requestanimationframe

cancelanimationframe