Progressbar.js 结合两种效果

Question

我正在尝试结合 progressbar.js 中的 2 种效果，但无法正常工作。有人可以看一下并帮助我吗？

这是我的代码笔，其中包含我目前拥有的代码：

var startColor = '#FC5B3F';
var endColor = '#9ec64d';

window.onload = function onLoad() {
    var circle = new ProgressBar.Circle('.progress', {
        color: startColor,
        duration: 3000,
        easing: 'bounce',
        strokeWidth: 8,

        // Set default step function for all animate calls
        step: function(state, circle, bar) {
            circle.path.setAttribute('stroke', state.color);
          bar.setText((bar.value() * 100).toFixed(0));
        }
    });

    // This will get the number from the page
    var value = ($('.progress').attr('value') / 100);

    // This will determine the circumference of the circle
    circle.animate(value, {
        from: {color: startColor},
        to: {color: endColor}
    });
};

我正在尝试将百分比文本与自定义动画相结合。可以在此页面上找到演示：

http://kimmobrunfeldt.github.io/progressbar.js/

我会毫不犹豫地奖励任何能帮助我解决这个问题的人。

Answer 1

需要在circle.animate方法中添加step函数

这就是您的 circle.animate 的外观

circle.animate(value, {
    from: {
        color: startColor
    },
    to: {
        color: endColor
    },
    step: function(state, circle, bar) {
        circle.path.setAttribute('stroke', state.color);
        console.log(circle);
        circle.setText((circle.value() * 100).toFixed(0));
    }
});

这是一个有效的 JSFIDDLE。

Progressbar.js 结合两种效果

Progressbar.js combine two effects

html

javascript

css

jquery

progress-bar