Question

让我们说我有一个圆圈，其中有一条线从中伸出。

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

但是， 我希望该行慢慢移动到那个角度。我不希望计算和设置每一帧的轮换，而是计算并补间到那个方向。

我遇到的问题是，如果你移动使线在弧度满足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，显而易见的是干线正在走了很长一段路，但是你想让它走向＆＃34;短途旅行＆＃34;。实现这一目标的最直观方式似乎是反转红圈计算的旋转。我能想到的最简单的方法是反转圆的极性。

Answer 2

问题在于angleToCenter从Math.PI切换到-Math.PI（反之亦然）。
因此我建议你创建一个“epsilon角度距离”，其中角度将被硬编码：

var angleToCenter = Math.atan2(centerY - dotY, centerX - dotX);
var epsilon = 0.05;
if (Math.abs(angleToCenter - Math.PI) <= epsilon / 2 || Math.abs(angleToCenter + Math.PI) <= epsilon / 2) {
  if (dotY > centerY) {
    currentAngle = -Math.PI;
  } else if (dotY < centerY) {
    currentAngle = Math.PI;
  }
} else if (angleToCenter < currentAngle - epsilon) {
  currentAngle -= epsilon;
} else {
  currentAngle += epsilon;
}

要进行完整修改，您可以查看my fork to your CodePan

旋转指向弧度的东西而不绕零

2 个答案: