javascript - 旋转指向以弧度为单位的某物而不绕零

Question

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

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

但是，我希望那条线慢慢移动到那个 Angular 。我不希望计算旋转并设置每一帧，而是计算旋转并补间到那个方向。

我遇到的问题是，如果您移动使线围绕弧度与 0 交汇的位置旋转，它将旋转 360(或 3.14 弧度；)以到达该点。

我花了一段时间想如何最好地解释这个，here is a codepen这有望帮助澄清我的问题

// 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;
}

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

Answer 1

好问题。非常不一样。

我将为黑色圆圈下方的任何位置定义逆 (-1) 关系。这样，如果红色圆圈穿过水平轴 - 其边界由黑色圆圈定义 - 方程式的数学结果会反转。

这会变成我们通常认为的 0 度，现在定位为 180 度。

推理:看看您的 CodePen，很明显 stem 是“绕远路”，但您希望它绕“近路”。实现这一目标的最直观方法似乎是反转红色圆圈计算的旋转。我能想到的最简单的方法是反转圆的极性。