使用设置角度点时如何阻止CSS旋转动画重置为0？

Question

我有一个菜单设计想法，其中包括一个中心光标，该光标指向当前正在选择的菜单项。我使用一些 JavaScript 代码实现了这一点，该代码采用代表按钮的固定角度列表，然后根据需要较少的角度来计算是顺时针还是逆时针旋转。然而，我遇到的问题是，从这 2 个角度（222° 到 115°，反之亦然）时，箭头不会采取最快的路线，而是向相反的方向旋转。

在做了一些研究之后，我认为实际发生的情况是光标重置为 0°，以便它在从零点到达选定角度之前完成圆圈，从而导致它走错方向。我在这里阅读了一些答案，并对整个旋转功能进行了一些一般性研究，但无法找到与我的案例足够相似的案例，也无法凭直觉找到一种我可以自己修复它的方法（网络开发作为一个整个对我来说都是新的）。理想情况下，我希望它忽略强制它完成圆圈的规则，而只是指向提供的角度，尽管我知道这可能无法使用 css 的旋转工具来完成，所以如果有任何东西可以做同样的事情为此，我们将不胜感激。我做了一个功能示例来在 jsfiddle 中展示我的问题。

html:

<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.sVcpgS1I_6kEJvuOecuuUgHaHa%26pid%3DApi&f=1&ipt=00bebfbdf248c4677c3ad5a9f6910bdfbd564aa401d634006f527981942f13d6&ipo=images" id="cursor">

CSS：

#cursor {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 40%;
    left: 40%;

    transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}

js:

const angles = {        // Dictionary of where we want our static angle positions to be
    button1: 290,
    button2: 222,
    button3: 115,
    button4:  75,
    button5:  0
}

var cursor = document.getElementById("cursor")
var currentAngle = 0;

$(".button").hover(function(){      // When mouse enters button area

    let next_angle = angles[this.id];
    let turn_radius = 0;
    let clockwise = (Math.abs(next_angle - currentAngle) < 180) ? true : false; // Calculates which direction is less degrees from source and returns boolean

    if (clockwise){
        turn_radius = (next_angle - currentAngle);
    }
    else {
        turn_radius = "-" + (360 - Math.abs(next_angle - currentAngle));
    }
    cursor.style.rotate = turn_radius +"deg";
});

https://jsfiddle.net/u3w4vz1n/latest/

Answer 1

造成这个问题的原因是每次更新角度时都是从 0 度开始，而不是从最短路径开始。更新你的 JS 函数如下：

let delta = nextAngle - currentAngle;

// Normalizing delta so that it takes the shortest path
if (delta > 180) {
    delta -= 360;
} else if (delta < -180) {
    delta += 360;
}

currentAngle += delta;

$(cursor).css('transform', 'rotate(' + currentAngle + 'deg)');