javascript 如何始终使用规格化Angular 和过渡顺时针旋转元素?

2g32fytz  于 2023-01-04  发布在  Java
关注(0)|答案(1)|浏览(115)

我正在尝试做一个简单的游戏,你可以旋转每个元素90度,每次点击一些过渡,如500ms。当它从270到0它去相反的方向。这是可能的,通过不断增加值+无限实现这一点,但如果我想保持Angular 正常化,从0到359?我如何告诉浏览器使用最近路径旋转一个对象,基本上是从270到360,而不是从270到0。如果有一天我超过了整数限制,它刹车了怎么办?这甚至是可能的?这里是一个例子,它是如何工作的现在。

const images = document.querySelectorAll("img")

for(const image of images) {
  let rotation = 0;

  image.style.transition = 'transform 500ms';

  image.addEventListener('click', function() {
    rotation = (rotation + 90) % 360
    image.style.transform = `rotate(${rotation}deg)`
  })
}
gfttwv5a

gfttwv5a1#

不需要用360来对Angular 进行模运算。JS中的整数极限大约是9007199254740991。所以如果你每秒旋转100次,它仍然会持续10万年左右。

const images = document.querySelectorAll("img")

for(const image of images) {
  let rotation = 0;

  image.style.transition = 'transform 500ms';

  image.addEventListener('click', function() {
    rotation = (rotation + 90)
    image.style.transform = `rotate(${rotation}deg)`
  })
}
<img src="https://picsum.photos/200">

相关问题