如何防止物体在达到全圆时旋转360度？

Question

我有一个图像，它总是指向鼠标的方向。

在某个角度从180deg到-180deg，我如何使图像采取短角而不是整圈？

// Find ship angle (Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;).
var mouseAngle = getAngle(FIREFLY.CENTER.X, FIREFLY.CENTER.Y, currentMousePos[0], currentMousePos[1]);

var turnDegrees = mouseAngle - FIREFLY.ANGLE;
var maxDegrees = 5;

console.log(mouseAngle + " " + FIREFLY.ANGLE);

if (turnDegrees > -5 && turnDegrees < 5) {
    // Do nothing.
} else if (turnDegrees < 0) {
    FIREFLY.ANGLE -= 5;
} else {
    FIREFLY.ANGLE += 5;
}

// Set ship direction.
FIREFLY.style.transform = 'rotate(' + (FIREFLY.ANGLE + 90) + 'deg)';

小提琴

Answer 1

角度是相同的模数360度，所以为了避免像359°这样的大旋转，你选择-1°，为了避免-359°，选择1°。

你可以做这样的事

var turnDegrees = (mouseAngle - FIREFLY.ANGLE) ;
if(-540<turnDegrees&&turnDegrees <=-180) turnDegrees+=360;
else if(180<turnDegrees&&turnDegrees<=540) turnDegrees-=360;

但事实证明，FIREFLY.ANGLE可以使用较大的值，因此为了避免大量其他if子句，一般的公式更好。这里有一个使用模块化的

var turnDegrees =  mod(mouseAngle - FIREFLY.ANGLE +180, 360) -180;
function mod(x, value){ // Euclidean modulo
    return x>=0 ? x%value : value+ x%value;
}

地块试验

小提琴更新：http://jsfiddle.net/crl/2rz296tf/31

Answer 2

您可以关闭CSS转换，并自己进行插值。

试着计算鼠标移动时角度之间的差异，并将其加到一个总角中，这样就不会将角度绑定到(-180,180)。