javascript - 如何制作围绕整圈旋转的css动画

我有有时由 transform: rotate() 旋转的元素。我想通过使用 transition: transform 来平滑状态之间的转换。问题是 rotate() 中的度数被硬编码为总是在 -360 和 +360 之间，所以在一个完整的回合度数的值从 359 跳转到 0 并且动画完整地返回而不是向右平滑小动画。有什么方法可以“以最短的方式”使过渡有效？

更新: Angular 从相机位置计算，所以我现在不能使用无限度值。

澄清:我现在无法更改 js 代码，只能更改 CSS。所以此时只有 [0, 360) 度数。演示仅模拟我所处的情况。

DEMO

o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;

document.querySelector("html").addEventListener("mousemove", (e) => {
  if (e.buttons === 1) {
    if (e.movementX > 0) {
      angle += delta;
    }
    if (e.movementX < 0) {
      angle -= delta;
    }
    angle %= FULL_TURN;
    o.style.transform = "rotate(" + angle + "deg)";
    t.innerText = angle + "deg";
  }
})

#arrow {
  font-size: 6em;
  width: 150px;
  text-align: center;
  user-select: none;
  transform-origin: 50% 60%;
  transition: transform 0.2s linear;
}

<header>Drag mouse left or right</header>
<span id="text">0deg</span>
<div id="arrow">↑</div>

最佳答案

您可以只计算“回合”并将每回合 360 添加到您的 Angular :

value = angle + rounds*360;

请参阅此工作示例:

o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;
rounds = 0;

document.querySelector("html").addEventListener("mousemove", (e)=>{
	if (e.buttons === 1) {
    if (e.movementX > 0) {
       angle += delta;
       if (angle >= 360) rounds++;
    }
    if (e.movementX < 0) {
       angle -= delta;
       if (angle <= -360) rounds--;
    }
    angle %= FULL_TURN;
    value = angle + rounds*360;
    o.style.transform = "rotate(" + value + "deg)";
    t.innerText = angle + "deg";
  }
})

#arrow {
  font-size: 10em;
  width: 150px;
  text-align: center;
  user-select: none;
  transform-origin: 50% 60%;
  transition: transform 0.2s linear;
}

body {
  padding: 10px;
}
header {
  margin-bottom: 10px;
}

<header>Drag mouse left or right</header>
<span id="text">0deg</span>
<div id="arrow">↑</div>

关于javascript - 如何制作围绕整圈旋转的css动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42527888/