如何防止物体在达到完整圆时旋转 360 度

How to prevent object from rotating 360deg when reaching full circle?

本文关键字：旋转 何防止      更新时间：2023-09-26

我有一个图像，它总是指向鼠标的方向。
在某些时候角度从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)';

小提琴

角度

是相同的模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;

但事实证明是萤火虫。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

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

尝试计算鼠标移动时角度之间的差异并将其添加到总角度中，这样角度就不会绑定到 （-180， 180）

相关文章：