javascript - CSS:如何避免 360° 的过渡旋转中断？

Question

我目前使用 JavaScript/CSS 实现了一个指南针。

全局实现工作正常。

但是，指南针的光标移动是颠簸的。我在 CSS 中实现了过渡 ease-in-out 以避免这个问题。

从 0 度到 359 度，光标逆时针旋转(使用 CSS 过渡)。

但是如果 Angular 设置为从 356 度到 1 度，CSS 过渡会顺时针旋转光标，所以间隙很大(355 度而不是 5 度)。

是否有避免这种差距的方法或其他解决方案来实现良好的过渡？

谢谢。

Answer 1

感谢每一个想法。

因此，通过 CSS，解决方案是像 Diodeus 所说的那样在 360 度范围内不断递增。但在我的例子中，计算出的 Angular 在 0 到 360° 之间缩放。

通过 JS，我们可以使用 anime.js，但我更喜欢编写适当的动画功能。此函数执行以下操作:

• 计算当前位置和目的地之间的顺时针 Angular
• 计算当前位置和目的地之间的逆时针 Angular
• 计算两者之间的最小 Angular (这是最短的路径)
• 对于 5 个样本，开始超时 5 次并将 [最小 Angular /5] 添加到当前位置以到达目的地。