jquery圈子进度|更改圆圈进度的颜色

Question

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

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

这是我已有的片段：

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

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

Here您想要的效果的实例。

您会注意到有两件事发生了变化。

首先，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;
}

jquery圈子进度|更改圆圈进度的颜色

jquery circle progress | Change color on circle progress

javascript

jquery

jquery-plugins