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すると、リンクは通常の位置に設定されます。

私の目標は、カーソルに向かってわずかに傾くリンク（おそらく、元の位置から最大40px）を作成
することです。カーソルがリンクに近づくと、リンクはゆっくりと元の位置に戻ります。
カーソルが中に入ると、たとえば、100pxのリンクは、「私を選んでください」と言うかのように、カーソルに向かって（スムーズに）ジャンプするはずです。

方程式はグラフとして次のようになります。

グラフ

これをJavaScriptの方程式として書く方法が必要です。私はしばらく代数をとっていません、そして私たちはこのように正確に見えるものを何も調べなかったと確信しています。どこかに指数と条件があると思いますが、よくわかりません。あなたがこれを理解することができれば、私は本当に感謝するでしょう（感銘を受けることは言うまでもありません）。

助けてくれてありがとう！

4

3 に答える 3

2

ここでは、区分的関数（あなたが話した「条件付き」）が間違いなく必要になります。中央のセクションは、Aの値が小さい場合（x=150のときにy=150になるように選択）、y = Ax^3またはy=Ax^5の形式の奇数乗多項式のように見えます。| x |の場合、曲線は本質的に線形であるように見えます。> = 200、つまりx>=200の場合はy=x + B、x<=-200の場合はy=x-B。150 <= |x|間の遷移 <= 200は、シフトされた指数または2次のように、少し注意が必要です。しかし、あなたはこれ（擬似コード）から始めるかもしれません：

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の間の遷移を無視し、それに応じて、上記の定数BIがゼロであると想定していることに注意してください。しかし、それはあなたが始めるかもしれません。

編集：

私の関数のプロットを見た後、5次多項式はあなたの望む形により近く一致すると思います。この場合、真ん中の関数はになりますy = (1.0/506250000.0) * pow(x,5)。結果は以下のとおりです。ちなみに、定数値は3次関数の場合は150 ^ -2、5次関数の場合は150^-4に相当します。

3次関数と5次関数のグラフ

于 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

これらの1つまたは組み合わせを使用できます：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 に答える