javascript - 加速数字越接近其最大值

Question

我正在尝试模拟进度条的速度。进度条以百分比 (0-100) 的形式显示当前进度。我想要实现的是一个函数/修饰符，它会修改实际进度，使其在开始时变慢，在结束时变快(当它达到 100% 时)

例如，如果实际进度为 5%，我们的修改器会将其修改为 6%，当进度达到 20% 时，我们的修改器会将其修改为 35%，而在 60% 时，我们的修改器会报告 80%。 ...直到达到 100

所以，它在开始时几乎没有改变，但在接近结束时速度稳步增加......

我不知道如何解决这个问题，我无法补间，因为我没有可以补间的时间范围。我想我必须应用一个数学函数来随时修改该值。以下内容不起作用，但我将其添加到此处只是为了说明我的观点:

console.clear()
let updated = 0;
for(i=0; i <= 100; i++){
	updated = (1 - Math.pow(i/101,2))
	console.log(i + updated)
}

我很感激任何关于如何解决这个问题的指导。谢谢

Answer 1

这里有两种方法。

var i = 0;
setInterval(function() {
  if (i <= 100) {
    updated = i * (Math.log10(i) / 2);
    
    document.getElementById("bar1").style.width = i + "%";
    
    document.getElementById("bar2").style.width = (i * (Math.log10(i) / 2)) + "%";
    
    document.getElementById("bar3").style.width = (i * i * i / 10000) + "%";
  i++;
}
}, 50)

.container {
  background: #ccc;
  width: 50vw;
}

.bar {
  background: #faa;
  height: 1em;
  width: 0%;
  border-top: thin solid #ccc;
}

<div class="container">
  <div id="bar1" class="bar">Linear</div>
  <div id="bar2" class="bar"></div>
  <div id="bar3" class="bar"></div>
</div>