存储requestAnimationFrame

Question

简介：

我已经做了一个requestAnimation，或者根据计数器有两个回调；

其中一个回调将增加计数器，另一个将减少计数器(总是在一定范围内循环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的requestAnimation不能像我所期望的那样工作吗？

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

这是一支工作笔 (查看问题注释行从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);

Answer 2

能解释为什么只存储和回忆分配给requestAnimation的变量不能像我所期望的那样工作吗？

您需要将var声明到函数的外部，如果var仅在函数中声明，那么它将被限制在该范围内。

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

您不需要停止/启动，只是不要请求下一个帧。对于存在无限循环的情况，您可能需要使用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));

工作实例

SVG Vertigo(未完成)

Answer 3

我认为您的方法与常用方法不同。我建议在需要时调用它，而不是开始/停止。

当我创建了一个非常简单而又小的动画库时，我学到了这一课。

https://github.com/allenhwkim/jsanimation

用法

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