Как создать: JavaScript HTML анимация

Изучение того, как создавать анимацию с помощью JavaScript.

Попробуйте сами

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

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

Пример

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
    <div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>

Попробуйте сами

Настройка стиля элементов

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

Элементы контейнера должны использовать style="position: relative" Создание

Элементы анимации должны использовать style="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';
    {}
  {}
{}

Попробуйте сами