使用SVG和JavaScript创建微调器

Question

我试图使用SVG和javascript创建一个微调器。问题是它没有准确地工作。它具有启动和停止功能。单击开始时，它会在动画之前延迟，当我停止时它会停止，但如果我再次单击“开始”则无法启动。

目前，它还没有在IE9和IE11中运行。如果有我不知道的黑客攻击。

您如何使用RapahelJS为其设置动画？

http://plnkr.co/edit/FC2qiZumzgjKSJOs6Zm5?p=preview

var spinner = function() {
var interval;

    var transition = function() {
        var path = document.querySelector('#spinner-wrapper .spinner #main-path');
        path.style.transition = path.style.WebkitTransition = 'none';
        path.style.strokeDasharray = '205.951, 205.951';
        path.style.strokeDashoffset = 430;
        path.getBoundingClientRect();
        path.style.strokeDashoffset = '0';
        path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear';
    };

    var startInterval = function(time) {
        return interval = setInterval(function() {
            transition();
        }, time);
    };

    return {
        start : function() {
            startInterval(2700);
        },
        stop : function() {
            startInterval(0);
            clearInterval(start());
        }
    };

};

Answer 1

很遗憾，我没有完整的代码答案。但是，我可以告诉你为什么会遇到一些问题。

首先，延迟的原因是你说setInterval(function(){...},2700);这意味着它将在2.7秒内调用该函数并在此之后每2.7秒继续调用它。尝试在setInterval()

之前添加这段代码

setTimeout(transition,0);

这将立即调用您的过渡功能一次。然后setInterval会在2.7秒后调用它。

我认为，重新启动问题的原因是您创建了多个间隔，并且仅清除其中一个间隔。出于某种原因，var interval功能无法访问stop()，可能是由于某些范围问题。因此，为了解决此问题，您需要重新构建一些代码。

修改

查看这个plunker：http://plnkr.co/edit/DLaQ21NqBtB79khsN9hE?p=preview。 希望它可以做你想做的事。代码：

var spinner = function() {
  this.transition = function() {
    var path = document.querySelector('#spinner-wrapper .spinner #main-path');
    path.style.transition = path.style.WebkitTransition = 'none';
    path.style.strokeDasharray = '205.951';
    path.style.strokeDashoffset = 430;
    path.getBoundingClientRect();
    path.style.strokeDashoffset = '0';
    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear';
};

  this.startInterval = function(immediate,time) {
    if(immediate){
      setTimeout(transition,0);
    }
    this.interval = setInterval(function() {
      transition();
    }, time);
    return this.interval;
  };

  this.start = function() {
    clearInterval(this.interval);
    startInterval(true,2700);
  };

  this.stop = function() {
    clearInterval(this.interval);
    startInterval(false,0);
  };

  return this;
};