1

我目前正在制作一个界面，其中我的图像链接倾向于鼠标光标。这比作为一个严肃的项目更有趣，但我从中学到的信息将在未来有用。现在我有几个变量设置......

  • 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 方程。我有一段时间没学代数了，我很确定我们没有仔细研究过任何看起来像这样的东西。我猜它在某处有一个指数和一个条件，但我不太确定。如果您能够弄清楚这一点，我将非常感激（更不用说印象深刻了）。

谢谢你的帮助！

4

3 回答 3

2

You'll definitely want a piecewise function here (the "conditional" you spoke of). The middle section appears to be an odd-powered polynomial of the form y = Ax^3 or y = Ax^5 for some small value of A (chosen to make y = 150 when x = 150). The curve appears to be essentially linear for |x| >= 200, that is y = x + B for x >= 200 and y = x - B for x <= -200. The transitions between 150 <= |x| <= 200 seem a little trickier, like a shifted exponential or quadratic. But you might start with this (pseudo code):

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

Note that this ignores the transitions between x = 150 and 200 and correspondingly assumes the constants B I mentioned above are zero. But it might get you started.

Edit:

After looking at a plot of my function, I think a 5th order polynomial matches your desired shape more closely. In this case, the middle function will be y = (1.0/506250000.0) * pow(x,5). Results are below. By the way, the constant values are equivalent to 150^-2 for the cubic, and 150^-4 for the quintic function.

Graph of cubic and quintic functions

于 2011-05-03T04:56:41.253 回答
1

我同意，如果你将它分成几部分，对你的函数建模可能会更容易：

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-03T04:25:42.007 回答
0

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

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

于 2011-05-03T04:15:31.743 回答