javascript - 选择最短的旋转来排列两个图像

Question

我已经为这个问题苦苦挣扎了一段时间，尽管起初它看起来并不难。

基本上我在屏幕上有一个由javascript动态旋转的三角形。动画的每一帧，三角形都试图在“正确的方向”上旋转 1 度，以便它的尖端指向屏幕上的另一个 div，我可以用箭头键四处移动。这个三角形具有以下 css 属性

#triangle {
    position: absolute;
    left: x;
    top: y;
    -webkit-transform: rotate(degrees)
}

我可以使三角形的点很好地跟随 div，但我不知道如何使该点始终采用最短的旋转。有时它会在“错误”方向上旋转 355 度，而不是在正确的方向上旋转 5 度。

我有点卡住了。有人可以帮我解决这个问题吗？

谢谢！

score 1 · Accepted Answer

我会尝试这样的事情：

function optimal_angle(degrees) {
  degrees = degrees % 360;

  if (degrees > 180) {
    return degrees - 360;
  } else {
    return degrees;
  }
}

还有一些测试：

> optimal_angle(355);
-5
> optimal_angle(-5);
-5
> optimal_angle(124373984);
104

如果你仔细想想，你最多可以向任何方向转动 180 度。因此，要“优化”一个角度，您需要删除重复的转数 ( degrees % 360)，如果角度超过 180 度，则转另一个方向。

1 回答 1