Question

这个问题将是我的死亡。我正在尝试使用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+"%", });
});

Answer 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的范围内。

Answer 2

也许您应该将它发布在数学或几何交换站点中......无论如何找到角度应该是简单的数学。我的方法是：

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/

让它发挥作用真是一件好事！：）

星场动画两点之间的角度路径

2 个答案: