Question

我正在尝试结合来自progressbar.js的两个效果，但我无法让它发挥作用。有人可以看看，也许可以帮助我吗？

这是我的代码，其中包含我到目前为止的代码：

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

您需要在step方法

中添加circle.animate功能

这是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结合了两种效果

1 个答案: