构建缓动函数配置的JavaScript界面遇到问题求助

问题说明 #

我正在尝试构建一个用于配置缓动函数的JavaScript界面，这类界面常见于After Effects、Blender等软件中。

已取得一定进展，但对结果并不满意。参考贝塞尔曲线思路尝试了多种计算方式，仍未达到预期效果。当前实现里控制手柄的效果不符合预期；尽管偶尔能让其中一个手柄表现正常，但总会存在问题。

目前能实现的最优状态是：右上角手柄表现符合预期，但左下角的handleA仅对Y轴位置有响应，X轴完全不起作用。

当前代码实现 #

const interpCurve = (t) => {
  const A = [0, 1];
  const B = [handlePosA.value.x, handlePosA.value.y];
  const C = [handlePosB.value.x, handlePosB.value.y];
  const D = [1, 0];

  const AB = interpolateLine(A, B, t);
  const BC = interpolateLine(B, C, t);
  const CD = interpolateLine(C, D, t);

  const ABBC = interpolateLine(AB, BC, t);
  const BCCD = interpolateLine(BC, CD, t);
  const ABBCBCCD = interpolateLine(ABBC, BCCD, t);

  const result = ABBCBCCD[1];
  return result;
};

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