Вращение HTML с использованием Javascript

Question

Так что я только начинающий, изучающий JavaScript, и у меня появилась идея создать пустой HTML-div и оформить его как коробку.

Теперь я хочу, чтобы этот ящик вращался ... непрерывно. Я получил это на основе кода ниже.

Код работает, но x уходит в бесконечность. Я хочу, чтобы он остановился на 360, а затем повторить цикл с 0 снова.

Кажется, это не работает ...

myVar = setInterval(rotateFunction, 10);
x = 0;

function rotateFunction () {
    document.getElementById("rotatordiv").style.transform = "rotate(" + x + "deg)";
    x++;
}

Answer 1

Просто проверьте значение x === 360 внутри функции и установите значение 0, в противном случае увеличьте его

myVar = setInterval(rotateFunction, 10);
x = 0;

function rotateFunction() {
  document.getElementById("rotatordiv").style.transform = "rotate(" + x + "deg)";
  if (x === 360) {
    x = 0
  } else {
    x++;
  }
}

#rotatordiv {
  width: 50px;
  height: 50px;
  background-color: red;
}

<div id="rotatordiv">
</div>

Answer 2

Если ваша единственная цель - создавать анимацию, я бы посоветовал вам использовать CSS-анимацию .

С ссылка выше :

У CSS-анимации есть три ключевых преимущества перед традиционными техниками анимации на основе сценариев:

1. Они просты в использовании для простых анимаций;Вы можете создавать их, даже не зная JavaScript.
2. Анимации работают хорошо, даже при умеренной загрузке системы.Простые анимации часто могут плохо работать в JavaScript (если они не сделаны хорошо).Механизм рендеринга может использовать пропуск кадров и другие методы, чтобы поддерживать производительность как можно более плавной.
3. Разрешение браузеру управлять последовательностью анимации позволяет браузеру оптимизировать производительность и эффективность, например, уменьшая частоту обновленияанимации, работающие во вкладках, которые в данный момент не видны.

---

Способ CSS

#square {
  display: inline-block;
  border: 25px solid red;
  animation: roll 1s linear infinite;
}

@keyframes roll {
  100% { transform: rotate(360deg); }
}

<div id="square"></div>

---

Если вы хотите использовать Javascript, я бы выбрал что-то вроде этого:

Javascriptпуть

const rotate = function (element, loopTime = 1000, angleStep = 5) {  
  const getElementAngle = function () {
    const transform = element.style.transform;
    // if transform is not set, then angle is 0, else use regex to get
    // the degrees.
    const angle = transform ? transform.match(/(\d+)deg/).pop() : 0;
    return parseInt(angle);
  }
  
  const setElementAngleTo = function (angle) {
    element.style.transform = "rotate(" + angle + "deg)";
  };
  
  const incrementRotation = function () {
    // getElementAngle() + angleStep % 360 makes "the loop",
    // if the next angle is higher than 360, then the 
    // modulo (%) returns it minus 360. 
    setElementAngleTo((getElementAngle() + angleStep) % 360);
  };
  
  // According to Mozilla's documentation, the minimum interval
  // you can have is 10ms. In order not to go under 10ms, I added
  // the "angleStep" variable.
  // Instead of this, implementing a function to calculate it 
  // automaticaly might be better.
  // 
  // Mozilla link:
  // https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#Parameters
  setInterval(incrementRotation, loopTime/(360/angleStep));
};

rotate(document.getElementById('square'));

#square {
  display: inline-block;
  border: 25px solid orange;
}

<div id="square"></div>

Я попытался сделать несколько комментариев, чтобы это было понятно.

---

Если вам не нужна такая сложность, вот что-то упрощенное, что делает более или менее то же самое:

Javascript, упрощенная версия

setInterval(rotate, 1);

function nextAngle() {
  const transform = document.getElementById("square").style.transform;
  const angle = transform ? transform.match(/(\d+)deg/).pop() : 0;
  return (parseInt(angle) + 1) % 360;
}

function rotate() {
  document.getElementById("square").style.transform = "rotate(" + nextAngle() + "deg)";
}

#square {
  display: inline-block;
  border: 25px solid pink;
}

<div id="square"></div>

---

или, с использованием глобальной переменной:

Способ Javascript, с глобальной переменной

var angle = 0;
function rotate() {
  angle = (angle + 1) % 360;
  document.getElementById('square').style.transform = "rotate(" + angle + "deg)";
}

setInterval(rotate, 10);

#square {
  display: inline-block;
  border: 25px solid navy;
}

<div id="square"></div>

Я отредактирую, если у вас возникнут вопросы.

Answer 3

Просто проверьте, если x = 360, если это так, установите его на 0. Если нет, то x ++