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

Question

我试图在网站上添加一个简单的javascript进度栏，发现了一些脚本，但是我总是遇到相同的问题-我可以初始化加载程序并将其设置为递增到给定的值，但是无法脚步。 这是一个简单的示例-https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

最后是：

bar.animate(1.0);

如何逐步制作动画？ 让我们先说50％，然后（2秒后）说到75％，然后再说100％。 我试过了

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

以及：

setTimeout(function(){bar.animate(0.5)}, 2000);
setTimeout(function(){bar.animate(0.75)}, 2000);
setTimeout(function(){bar.animate(1)}, 2000);

但它总是选择最后一个（最高）值，而不是逐步进行动画处理。 任何建议表示赞赏。

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>