Question

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

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

以下是我已有的内容：

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

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圈进度|更改圆圈进度的颜色

1 个答案: