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，则链接设置为正常位置

我的目标是让一个向光标稍微倾斜的链接（可能距离原始位置最多40px）和
当光标靠近链接时，链接将慢慢返回其原始位置当光标进入时，比方说，100px链接应该（平滑地）跳向光标，好像在说“接我！”

以下是图表的等式。

Graph

我需要一种方法将其写为javascript方程式。我有一段时间没有学习代数，我很确定我们没有完全看到这样的东西。我猜它有一个指数和一个有条件的地方，但我不太确定。如果你能够弄清楚这一点，我会非常感激（更不用说留下深刻印象了）。

谢谢：求助！

Answer 1

你肯定想要一个分段函数（你所说的“条件”）。对于A的一些小值（选择为当x = 150时使y = 150），中间部分看起来是形式为y = Ax ^ 3或y = Ax ^ 5的奇数幂多项式。对于| x |，曲线看起来基本上是线性的＆gt; = 200，即对于x> = 200，y = x + B，对于x <= -200，y = x-B。 150＆lt; = | x |之间的转换＆lt; = 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 I为零。但它可能会让你开始。

修改

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

Answer 2

我同意如果你将它分成几部分可能更容易建模你的功能：

f(x) = x + 50        if x < -200
       -150          if -200 <= x < -150
       150*(x/150)^k if -150 <= x < 150:
       150           if 150 <= x < 200
       x - 50        if 200 <= x

for k some big odd number (I'd try 4-10 out...)

Answer 3

您可以使用以下一种或组合： http://drawlogic.com/2007/09/14/tweener-robert-penner-easing-equation-cheat-sheets/

或http://www.robertpenner.com/easing/easing_demo.html

这个图表的等效Javascript方程是什么？

3 个答案: