Question

我想根据收到的角度旋转指南针图像。输入度在0到359之间，所以当我从0旋转-1度时，图像旋转一整圈并设置为359：

function setCompass(degrees){
    $("#compass").stop().transition({rotate: -1*degrees +'deg'});
}

我试图通过回到 -1 而不是 359 来解决问题，所以我将代码更改为以下内容：

function setCompass(degrees){
    if (degrees>180){degrees=degrees-360}
    $("#compass").stop().transition({rotate: -1*degrees +'deg'});
}

它解决了0和360的滞后问题，但问题转移到180。现在，当我将设备从180旋转到181时，它旋转了一个完整的负圆，回到了-179！请建议我如何修改计算，以便在每个度数上都能得到平稳的变化？

Answer 1

您可以使用一些取模公式来确定是顺时针还是逆时针旋转。使用jQuery的data方法保持当前角度（因此，如果您愿意的话，可以有多个这样的指南针），并允许以CSS值传递的角度在0-359范围之外。

这是它的工作方式：

function setCompass(degrees){
    var curr = $("#compass").data("rotation") || 0;
    var next = curr + ((degrees - curr)%360 + 180*3) % 360 - 180;
    $("#compass").data("rotation", next).stop().transition({rotate: -next + 'deg'});
}

// Demo with randomly generated angles between 0 and 359
setInterval(function() {
    setCompass(Math.floor(Math.random()*360));
}, 1000);

<img id="compass" src="https://i.stack.imgur.com/zdHVn.png" width="100px" height="100px">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>

如何规范指南针的输入？

1 个答案: