JavaScript анимация на веб-странице

 alexei 08/11/2021 - 10:00

Здесь вы узнаете, как сделать анимацию HTML элемента при помощи JavaScript.



Базовая веб-страница

Чтобы показать, как создать HTML анимацию при помощи JavaScript, мы будем использовать простую веб-страницу.


<!DOCTYPE html>
<html>
<body>

<h1>Моя первая JavaScript анимация</h1>

<div id ="myContainer">
    <div id ="myAnimation">Анимация будет здесь</div>
</div>

</body>
<html>

Стили элементов

Чтобы анимация заработала, анимируемый элемент должен анимироваться относительно "родительского контейнера".

У элемента контейнера должно быть установлено свойство position: relative.

У анимируемого элемента должно быть установлено свойство position: absolute.


#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

Код анимации

JavaScript анимация осуществляется при помощи запрограммированных постепенных изменений стилей элемента.

Изменения осуществляются по таймеру. Если интервалы таймера достаточно малы, то анимация выглядит плавной.

Базовый код будет таким:


var id = setInterval(frame, 5);

function frame() {
  if (/* условие окончания анимации */) {
    clearInterval(id);
  } else {
    /* изменение стилей элемента */ 
  }
}

Создание анимации при помощи JavaScript


var id = null;
function myMove() {
  var elem = document.getElementById("myAnimation");
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 10);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}