j查询圈进度 |在圆圈进度上更改颜色

Question

我正在使用jquery-circle-progress插件来画一个圆。随着圆圈大小的增加(或减小(，我希望圆圈的颜色相应地平滑变化。

我写了一个有 100 种不同渐变的函数，从绿色到橙色再到红色。为了更清楚：圆圈应始终为 1 种颜色，但当圆圈移动时，该颜色的渐变必须无缝更改。

这是我已有的片段：

https://codepen.io/anon/pen/QxqBVq

如您所见，当圆圈大小发生变化时，圆圈的颜色会立即变为红色。如何使颜色变化更顺畅？

.HTML：

<div class="circle"></div>

使用一些默认设置初始化圆圈：

var circle = $('.circle').circleProgress({
value: 0.50,
fill: { color: 'rgb(127,127,0)' }
});

渐变的自定义 JavaScript 函数：

function setGradient(value) {
// Start with: "if (value == 0.01)"
if (value == 0.50) {
color = 'rgb(127,127,0)';
}
if (value == 0.51) {
color = 'rgb(132,122,0)';
}
if (value == 0.52) {
color = 'rgb(137,117,0)';
}
if (value == 0.53) {
color = 'rgb(142,112,0)';
}
if (value == 0.54) {
color = 'rgb(147,107,0)';
}
if (value == 0.55) {
color = 'rgb(153,102,0)';
}
if (value == 0.56) {
color = 'rgb(158,96,0)';
}
if (value == 0.57) {
color = 'rgb(163,91,0)';
}
if (value == 0.58) {
color = 'rgb(168,86,0)';
}
if (value == 0.59) {
color = 'rgb(173,81,0)';
}
if (value == 0.60) {
color = 'rgb(178,76,0)';
}
// ... etc until: "if (value == 1.00)"
return color;
}

圆圈在几秒钟后发生变化：

setTimeout(function() {
circle.circleProgress('value', 0.60);
circle.one('circle-animation-progress', function() {
$(this).circleProgress({
fill: { color: setGradient(circle.circleProgress('value')) },
})
});
},3000);

Answer 1

这里有一个你想要的效果的活生生的例子。

您可以注意到两件事发生了变化。

首先，circle-animation-progress更改instance.arcFill并且不会再次触发circleProgress。为了获得新颜色，我通过了stepValue而不是value。

var circle = $(".circle")
.circleProgress({
value: 0.5,
fill: "rgb(127,127,0)"
})
.on("circle-animation-progress", 
function(event, animationProgress, stepValue) {
var instance = $(this).data("circle-progress");
instance.arcFill = setGradient(stepValue);
});
setTimeout(function() {
circle.circleProgress("value", 0.6);
}, 3000);

其次，setGradient略有不同。由于stepValue是一个大的十进制数，因此您必须将低于(或高级(的值与特定值进行比较，并且不相等，如以下示例所示：

function setGradient(value) {
// Start with: "if (value == 0.01)"
let color = "rgb(127,127,0)";
if (value >= 0.5) {
color = "rgb(127,127,0)";
}
if (value >= 0.51) {
color = "rgb(132,122,0)";
}
if (value >= 0.52) {
color = "rgb(137,117,0)";
}
if (value >= 0.53) {
color = "rgb(142,112,0)";
}
if (value >= 0.54) {
color = "rgb(147,107,0)";
}
if (value >= 0.55) {
color = "rgb(153,102,0)";
}
if (value >= 0.56) {
color = "rgb(158,96,0)";
}
if (value >= 0.57) {
color = "rgb(163,91,0)";
}
if (value >= 0.58) {
color = "rgb(168,86,0)";
}
if (value >= 0.59) {
color = "rgb(173,81,0)";
}
if (value >= 0.6) {
color = "rgb(178,76,0)";
}
// ... etc until: "if (value == 1.00)"
return color;
}