2

この問題は私の命取りになるだろう。jqueryを使って一からスターフィールド型のアニメーションを作ろうとしています。私の jfiddle へのリンクはhttp://jsfiddle.net/wompdesigns/jNBAk/4/です。これにより、画面上にランダムに配置された 12 個の小さな div が表示されます。コード単位でアニメーションを実行することに問題はありません。私が問題を抱えているのは、中心点のdiv（緑）から配置されたdiv（赤）で目的地を見つけることです。つまり、配置された div (赤) から親 div の最後まで、中心 (緑) から対応する角度で移動したいということです。この質問が理にかなっていることを願っています。これを解決しようとする人に感謝します。jquery コードは次のとおりです。

$('.cs').each(function(index) {
    var posx = Math.ceil(Math.random() * (60-40+1)) + 40;
    var posy = Math.ceil(Math.random() * (60-40+1)) + 40;
    $(this).css({left: posx+"%", top: posy+"%", });
});
4

2 に答える 2

1

頭に浮かんだ最速のソリューション（最適化されていないか、最適ではない可能性があります）。

あなたのタスクをいくつかのサブタスクに分けます。例えば：

A. define angle.

B. move from O to O'.

角度を定義するには、緑色の四角形を座標 (0,0) の開始点にします。

赤い点ごとに、次のことを行う必要があります。

1. Define (x,y).
2. Get angle between (x,y) and (x,0). This would be the angle you need.

O から O' に移動するには、次のことが必要になります (まあ、それは言うことではありません:P):

1. Define angle tangens.**(one time)**
2. For given x calculate y by evaluating linear equation **y=kx** .

さらに、赤い点が親 div の境界内にあるように、何らかのチェックを行う必要があります。

于 2012-12-04T11:03:48.267 に答える
0

おそらく、これを数学または幾何学の交換サイトにも投稿する必要があります... とにかく、角度を見つけることは簡単な数学でなければなりません。私のアプローチは次のとおりです。

for each red dot
  Get the center of the red dot:
  X = $(this).position().left + $(this).width() / 2
  Y = $(this).position().top + $(this).heigh() / 2

Likewise, get the green dot center as well 
  Cx, Cy = something (it is not 0,0)

for each red dot,
  the angle is the arctan((Y-Cy)/(X-Cx))
  to make things simple:
    for every 1 (or -1 if X<Cx) pixel step horizontally
    make (Y-Cy)/(X-Cx) pixel steps vertically

見苦しい疑似コードで申し訳ありませんが、すぐに JS に変換できるはずです。適切な方向に適切な量をステップする限り、arctan を計算する必要さえありません。

それが機能するかどうか教えてください...

このような結果が得られます: http://jsfiddle.net/jNBAk/7/

それを機能させるのはとても楽しかったです！:)

于 2012-12-04T11:18:02.507 に答える