将滑块线性值转换为指数

Question

我有一个滑块：

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

min

、

max

值和

step

是

constants

。 在每一步（即拇指位置变化）滑块都会返回当前值和拇指位置（以 % 为单位）。

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

红色图形：

在每一步（拇指位置变化）滑块都会返回当前值 拇指位置百分比 - 当前值线性增长，具体取决于 拇指位置。

绿色图形：

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

Answer 1

您可以使用缓动功能。

• 缓动公式：http://easings.net/
• 描述：什么是缓动函数？

// 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; }