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