變換滑塊線性值到指數

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