javascript - 这个图的等效 Javascript 方程式是什么？

Question

我目前正在制作一个界面，其中我的图像链接倾向于鼠标光标。这与其说是一个严肃的项目，不如说是为了好玩，但是尽管如此，我从中学到的信息在将来还是很有用的。现在我有几个变量设置...

• diffx/y = 光标与链接原始位置的距离(以像素为单位)。如果光标移动到链接原始位置(已计算)的左侧或上方，则此值变为负数。
• spacex/y = 我希望光标和链接之间的距离

• calcx/y = 计算出的数字将被添加到链接的 'style.top' 和 'style.left'

  calcx = diffx - spacex
  calcy = diffy - spacey
  
  link.style.top = calcx
  link.style.top = calcy
  

如果我设置 spacex/y = 0 链接以光标为中心
如果我设置 spacex/y = diffx/y 链接设置到它的正常位置

我的目标是让链接稍微向光标倾斜(可能距离原始位置最多 40 像素)和
随着光标靠近链接，链接会慢慢回到原来的位置。
当光标进入 100px 时，链接应该(平滑地)跳向光标，就好像在说“选我!”

下面是方程式的图形。

我需要一种方法将其写成 javascript 等式。我已经有一段时间没有学习代数了，而且我很确定我们没有复习任何看起来像这样的东西。我猜它在某处有一个指数和一个条件，但我不太确定。如果您能解决这个问题，我将非常感激(更不用说印象深刻了)。

谢谢的帮助!

Answer 1

您肯定需要一个分段函数(您所说的“条件函数”)。中间部分似乎是 y = Ax^3 或 y = Ax^5 形式的奇次多项式，对于 A 的某个小值(选择使 x = 150 时 y = 150)。 |x| 的曲线看起来基本上是线性的>= 200，即 y = x + B for x >= 200 和 y = x - B for x <= -200。 150 <= |x| 之间的转换<= 200 似乎有点棘手，就像移动的指数或二次方。但是你可以从这个开始(伪代码):

if (x < -150) {
    y = x;
} 
else if (x < 150) {
    y = (1.0/22500.0) * pow(x, 3);
}
else {  // x > 150
    y = x;
}

请注意，这忽略了 x = 150 和 200 之间的转换，并相应地假设我上面提到的常数 B 为零。但这可能会让您入门。

编辑:

在查看我的函数图后，我认为 5 阶多项式更符合您想要的形状。在这种情况下，中间函数将为 y = (1.0/506250000.0) * pow(x,5)。结果如下。顺便说一下，对于三次函数，常数值相当于 150^-2，对于五次函数，常数值相当于 150^-4。