Question

我正在尝试向我的网站添加一个简单的javascript进度条，我发现了一些脚本，但我总是遇到同样的问题 - 我能够初始化加载器并将其设置为增量到给定值，但不能按步骤进行。这是一个简单的例子 - https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

最后有：

fastcgi_read_timeout 400s;

我如何让步骤动画？让我们首先说50％然后（2秒后）到75％然后是100％。我试过了

bar.animate(1.0);

以及：

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

但它总是选择最后一个（最高）值，而不是按步骤设置动画。有任何建议。

Answer 1

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

上述代码同时运行，最后一个代码覆盖其他代码。

setTimeout(function(){bar.animate(0.5); console.log("animate")}, 2000);
    console.log('timeout 1 called');
 setTimeout(function(){bar.animate(0.75); console.log("animate")}, 2000);
    console.log('timeout 2 called');
setTimeout(function(){bar.animate(1); console.log("animate")}, 2000);
    console.log('timeout 3 called');

设置第一个超时后，它不会在设置下一个超时之前等待延迟。检查控制台上的日志，看看会发生什么。

问题是这些脚本同时运行。做这样的事情（或更好的事情）：

bar.animate(0.5);  // Number from 0.0 to 1.0
setTimeout(function () {
    bar.animate(0.75);
}, 2000);

setTimeout(function () {
    bar.animate(1.0);
}, 4000);

如果你想为序列设置序列动画，你也可以用CSS做关键帧。

Answer 2

问题在于，您实际上是在排队所有步骤同时发生。相反，您希望将回调传递给animate函数，因此当它完成时，您可以告诉它转到下一步。

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '100%'
  },
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {
    color: '#FFEA82'
  },
  to: {
    color: '#ED6A5A'
  },
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

// Keep track of the current value
var value = 0;
setTimeout(function increment() {
  value += 0.1;
  bar.animate(value, function() {
    // Animation has completed, queue up another step
    if (value < 1) {
      setTimeout(increment, 500);
    }
  });
}, 1000);

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>

如何在javascript进度条中增加进度？

2 个答案: