私はスライダー持っ

Question

を指数部には、スライダの線形値を変換：

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

minを、max値とstepはconstantsです。 各ステップ（サム位置の変更）で、現在の値と親指の位置を％で返します。

2番目のグラフィックのように指数関数的に増加するように現在の戻り値を変換するにはどうすればいいですか（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; }