javascript - 旋转以弧度指向某物而不绕零

Question

假设我有一个圆圈，上面有一条线。

无论圆圈移动到哪里，我都希望这条线指向窗口的中心。

但是，我希望那条线慢慢地移动到那个角度。我不希望计算旋转并设置每一帧，而是计算并调整到该方向。

我遇到的问题是，如果您移动以使线围绕弧度与 0 相交的位置旋转，它将执行完整的 360 度（或 3.14 弧度；）到达该点。

我花了一段时间试图思考如何最好地解释这一点，这是一个代码笔，希望能帮助澄清我在问什么

// CenterX/Y is the center of the screen.
// dotX/Y is the center of the circle.
var angleToCenter=Math.atan2(centerY-dotY,centerX-dotX);

if (angleToCenter<currentAngle) {
  currentAngle-=0.05;    
} else {
  currentAngle+=0.05;
}

如果您移动到屏幕的右侧，然后在中心上方或下方移动，您将看到线移动一整圈以尝试到达计算的方向。我该如何避免这种情况？我希望这条线通过尽可能最短的方式无缝旋转到指向中心，而不是通过一个完整的圆圈。

标签： javascripttrigonometry

Answer 1

好问题。非常不一样。

我将为黑色圆圈下方的任何位置定义一个逆（-1）关系。这样，如果红色圆圈穿过水平轴（其边界由黑色圆圈定义），则方程的数学结果是相反的。

这将使我们通常认为的 0 度，现在定位在 180 度。

推理：查看您的 CodePen 很明显，词干正在“绕远路”，但您希望它走“绕路”。实现这一点的最直观的方法似乎是反转红圈计算的旋转。我能想到的最简单的方法是反转圆的极性。