Progressbar.js объединяет два эффекта

Question

Я пытаюсь объединить 2 эффекта от progressbar.js, но я не могу заставить его работать. Может кто-нибудь взглянуть и, может быть, поможет мне?

Это мой codepen с кодом, который я до сих пор:

http://codepen.io/stephan-v/pen/MwQQzJ

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 за то же самое.