[英]Progressbar.js combine two effects
I am trying to combine 2 effects from progressbar.js but I can't get it working. 我试图结合来自progressbar.js的2种效果,但是我无法使其正常工作。 Could somebody take a look and maybe help me out? 有人可以看一下,也许可以帮助我吗?
This is my codepen with the code that I have so far: 这是我到目前为止的代码的codepen:
http://codepen.io/stephan-v/pen/MwQQzJ 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}
});
};
I am trying to combine the percent text with the custom animation. 我正在尝试将百分比文本与自定义动画结合起来。 The demo's can be found on this page: 该演示可以在此页面上找到:
http://kimmobrunfeldt.github.io/progressbar.js/ http://kimmobrunfeldt.github.io/progressbar.js/
I would have no problem rewarding whoever can help me out with this. 奖励任何可以帮助我解决这个问题的人,我都没有问题。
you need to add the step
function in the circle.animate
method 您需要在circle.animate
方法中添加step
函数
this is how your circle.animate
should look 这就是你的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));
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.