将滑块线性值转换为指数

Question

我有一个滑块：

min val. = 0
max val. = 20'000
step = 0.1

min，max值和step为constants。 在每个步骤（即拇指位置更改）滑块上以％返回当前值和拇指位置。

如何转换当前返回的值，使其像第二个图形一样呈指数级增长 - 其中0 - 8'000 - 占滑块宽度的80％。

红色图形：

  

在每个步骤（拇指位置更改）滑块上返回当前值   并且拇指位置为％ - 当前值线性增长，具体取决于   拇指位置。

绿色图形：

  

这就是我需要的。我只能使用当前的拇指位置和电流   滑块值作为函数参数。

Answer 1

您可以使用easing function。

• 简化公式：http://easings.net/
• 说明：What is an easing function?

// formula     http://easings.net/
// description https://stackoverflow.com/questions/8316882/what-is-an-easing-function
// x: percent
// t: current time,
// b: beginning value,
// c: change in value,
// d: duration

function easeOutQuart(x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}

var i;
for (i = 0; i <= 20000; i += 1000) {
    console.log(i, i * 100 / 20000, easeOutQuart(null, i * 100 / 20000, 0, 100, 100));
}

.as-console-wrapper { max-height: 100% !important; top: 0; }