使用 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;
};