我已经为这个问题苦苦挣扎了一段时间,尽管起初看起来并不难。
基本上,我在屏幕上有一个由JavaScript动态旋转的三角形。在动画的每一帧中,三角形都会尝试在“正确的方向”上旋转1度,以便其尖端指向屏幕上的另一个div,我可以使用箭头键来移动它。该三角形具有以下css属性
#triangle {
position: absolute;
left: x;
top: y;
-webkit-transform: rotate(degrees)
}
我可以使三角形的点很好地跟随div,但是我不知道如何使点始终以最短的旋转。有时,它会沿“错误”方向旋转355度,而不是向右旋转5度。
我有点卡住。有人可以帮我解决这个问题吗?
谢谢!
最佳答案
我会尝试这样的事情:
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度,则转另一种方法。关于javascript - 选择最短的旋转以对齐两个图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11821118/