Starfield动画两点之间的角度路径

这个问题将会是我的死亡。我试图用jquery从头开始创建一个starfield类型的动画。我的jfiddle的链接是http://jsfiddle.net/wompdesigns/jNBAk/4/。这给我12个随机放置在屏幕上的小divs很好。我真的没有问题做代码动画。我所遇到的问题是从中心点div（绿色）找到放置的div（红色）的目标点。换句话说，我想从放置的div（红色）到父div的末端，以与中心对应的角度（绿色）。我希望这个问题是有道理的，并且感谢任何试图解决这个问题的人。 jQuery代码如下：Starfield动画两点之间的角度路径

$('.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+"%", }); 
});

来源

2012-12-04 user1875280

也许你应该在数学或几何stach交流网站上发布这个......无论如何找到角度应该是简单的数学。我的做法是：

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-04 11:18:02 Tallmaris

这工作完美！感谢你们俩。两个答案都以不同的观点正确解释。我真的希望我可以将两个答案都标记为正确。这个来自Tallmaris的实例很好用，但我也很好地使用了@Jevgeni Smirnov制作的配方。再次，谢谢你们！ – user1875280

@ user1875280很酷。有什么东西可以展示吗？我感兴趣的是它的样子。 –

最快的解决方案，来考虑（可能不是最优的或最佳）。

我会将你的任务分成几个子任务。例如：

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-04 11:03:48

Starfield动画两点之间的角度路径

回答

相关问题