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

我目前正在制作一个界面，我有图像链接，倾向于鼠标光标。这比有趣的项目更有趣，但是我从中学到的信息在未来会很有用。现在我有几个变量设置...这张图表的等效Javascript方程是什么？

diffx/Y =的距离，以像素为单位，将光标从链接的原始位置。如果光标位于链接原始位置的左侧或上方（已计算），则此值为负值。
SpaceX公司/ Y =我想在光标和链路

calcx/Y =计算出的数量将被添加到“style.top”和“风格之间的距离的量。链路

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方程。我在一段时间内没有考虑过代数，我敢肯定，我们并没有完全看到这样的东西。我猜它有一个指数和一个有条件的地方，但我不太确定。如果你能够弄清楚这一点，我会非常感激（更不用说留下深刻的印象）。

谢谢你为您的帮助！

来源

2011-05-03 webdesserts

你这里肯定会需要一个分段功能（你所说的“有条件的”）。对于A的一些小值（当x = 150时选择使y = 150），中间部分看起来是y = Ax^3或y = Ax^5形式的奇数次多项式。该曲线对于| x |似乎基本上是线性的> = 200，即y = x + B（对于x> = 200且y = x-B对于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 I如上所述是零之间的过渡。但它可能会让你开始。

编辑：

看着我的函数的曲线图后，我想了五阶多项式所需的形状更紧密地匹配。在这种情况下，中间函数将是y = (1.0/506250000.0) * pow(x,5)。结果如下。顺便说一下，常数值相当于立方体的150^-2和五次函数的150^-4。

Graph of cubic and quintic functions

来源

2011-05-03 04:56:41

到目前为止你的工作是最好的。雅，我会看到让最后一部分工作，但现在我会跑这个。我会让你知道，如果我可以得到它的工作。谢谢！ – webdesserts 2011-05-03 05:24:11

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

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

来源

2011-05-03 04:15:31

我同意它可能是更容易的函数模型，如果你在零件拆呢：

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...)

来源

2011-05-03 04:25:42 hugomg

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

回答

相关问题