我已经为这个问题挣扎了一段时间,尽管一开始看起来并不难。
基本上,我在屏幕上有一个由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度,你可以转向另一个方向。