如何反转ease-in-quad缓动函数？实现滑块值逆向转换

首先要明确你的正向计算逻辑，再针对性推导逆向公式：

情况1：标准ease-in-quad正向转换（你原本想要的逻辑） #

标准的ease-in-quad是将滑块的**拖动进度t（0~1）**转换为缓动进度，再映射到数值范围：
正向公式：

// min=200，max=500，range = max - min = 300
// t是滑块拖动进度（0对应min，1对应max）
const getEasedValue = (t, min, max) => {
  const range = max - min;
  return min + range * (t * t); // ease-in-quad核心：t→t²
};

当滑块在中间位置（t=0.5），线性值是200+300*0.5=350，缓动值是200+300*(0.5²)=275。

逆向转换（从缓动值还原线性值） #

已知缓动值y，求对应的线性值x：

1. 先计算缓动进度的归一化值：easedProgress = (y - min) / range
2. 解出原始拖动进度：t = Math.sqrt(easedProgress)（取正根，因为t∈[0,1]）
3. 计算线性值：x = min + range * t

代码实现：

const getLinearValueFromEased = (y, min, max) => {
  const range = max - min;
  const easedProgress = (y - min) / range;
  const t = Math.sqrt(easedProgress);
  return min + range * t;
};

代入y=275，得到x=350，符合预期。

情况2：你当前误用参数的正向逻辑（得到237.5的情况） #

你的代码中把c设为了线性值与最小值的差（350-200=150），而非总范围（500-200=300），导致正向公式实际是三次方关系：
正向公式（你的代码等价于）：

// x是线性值（200~500）
const getEasedValue = (x, min, max) => {
  const range = max - min;
  const linearProgress = (x - min) / range;
  return min + (x - min) * linearProgress * linearProgress;
};

代入x=350，得到200 + 150*(0.5²)=237.5，和你的结果一致。

逆向转换（从237.5还原350） #

需要解三次方程：
y = min + (x - min) * ((x - min)/range)²
整理得：
(x - min)³ = (y - min) * range²
所以逆向公式：

const getLinearValueFromEased = (y, min, max) => {
  const range = max - min;
  const temp = (y - min) * range * range;
  const xMinusMin = Math.cbrt(temp);
  return min + xMinusMin;
};

代入y=237.5，min=200，max=500：
temp = 37.5 * 300 * 300 = 3375000
xMinusMin = 三次根号3375000 = 150
x = 200 + 150 = 350，完全符合你的需求。

总结：逆向转换完全可行，关键是先明确正向转换的数学关系，再推导对应的逆运算。

内容的提问来源于stack exchange，提问作者Whip