這張圖表的等效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方程是什麼？

回答

相關問題