圆形进度条上的增量更平滑

Question

我在 PLC 上运行的 HTML 页面上创建了一个循环进度条。 我希望通过增加完成 HTML 画布弧所需的增量量来使动画更平滑。

从 PLC 读取的变量每秒增加 0.27。 我的目标是让我的进度条在每次从我的 PLC 读取之间执行 10 个 0.027 的增量，以使进度条动画看起来更流畅。 此刻，我只是将此值视为一个数字，一旦我得到 0.027 部分的 10 个增量，我将对我的代码的弧部分进行排序。

使用代码，我目前的数字跳了很多。

var cratio = ((v2.nodeValue/360)*100);

for (var i = 0; i < 10; i++) {
    
setInterval(function () {
var cratio2 = (cratio + 0.027);     
var cratio3 = cratio2.toFixed(2);
    document.getElementById("cycleratio").innerHTML = cratio3 + "%";
 cratio = cratio3;  
}, 10); 

}

我在另一个 setInterval 循环中拥有上述代码的全部内容，该循环每 100 毫秒运行一次函数，然后您可以看到我每 10 毫秒通过该函数递增。

我相信它不起作用，因为我没有重置 i 变量，并且我在 0.027 的所有 10 个增量完成之前重新定义 cratio，但我已经尝试了几个小时来解决这个问题，但一无所获。

我会很感激任何帮助。 谢谢你：p

Answer 1

根据您的解决方法，我不太确定我是否理解您在做什么，但如果您想每 100 毫秒增加一个数字，它会为您工作。

var cratio = ((v2.nodeValue/360)*100);
const interval = setInterval(() => {
  cratio += 0.027
  document.getElementById("cycleratio").innerHTML = cratio.toFixed(2) + "%";
  if (cratio >= 100) //or any number which is your max
  clearInterval(interval)
}, 100)