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

如果在0.0和1.0之间移动，则补间功能会更容易。这将允许类似于您的代码。

例如：

for (let i = 0; i <= 1; i += .1) {
    console.log((i ** 2 *100).toFixed(2))
}

加速很快。由于0 ** n始终是0而1 ** n始终是1，因此您可以自由选择指数来改变速度，同时保持0到1之间的值：

0.00 1.00 4.00 9.00 16.00 25.00 36.00 49.00 64.00 81.00 100.00

Answer 2

以下是两种方式。

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

假设您有一个f function并且您有一个t重复时间（以毫秒为单位），也就是说，进度条会在每个t上执行一步。你可以像这样工作：

var intervalID = setTimeout(f, t);

现在，让我们考虑一下f的样子。如果我们希望进度条在开始时较慢，但在结束时更快，那么我们需要一个比线性函数更陡峭单调增加的函数。线性复杂性如下所示：

l(x) = aX + b

其衍生物是

l'(x) = a

这是一个常数。我们需要一个增长更快的功能。我们来看看这个函数：

f(x) = x^2

f'(x) = 2x

所以这对你有好处

function f() {
    var result = x * x;
    //Set progress bar to Math.min(result, 100)
    if (result >= 100) clearInterval(intervalID);
}

加速数量越接近最大值

3 个答案: