Повторять бесконечность анимации после загрузки страницы в JavaScript - PullRequest
Новая
       172

Повторять бесконечность анимации после загрузки страницы в JavaScript

0 голосов
/ 09 мая 2020

У меня есть и svg, которые я хочу оживить. Это сигнал Wi-Fi, поэтому я хочу создать эффект отправки сигнала Wi-Fi, изображение:

enter image description here

Таким образом, эффект:

-Убедить исчезновение красного на полсекунды (с помощью opacity: 0 или display: none).

-Заставить исчезновение синего на полсекунды

-Заключить исчезновение голубого на полсекунды

-Заставить исчезновение желтого на полсекунды

-Заключить исчезновение фиолетового на полсекунды

-Заставить исчезновение зеленого на полсекунды

-Увеличить устройства transform: scale(1.5); и обратно на transform: scale(1)

-Подождите 4 секунды

-Запустите анимацию снова

Я пробовал с 

function afterLoad() {
  setInterval(function() {
    var red = document.getElementById("red");
    var blue = document.getElementById("blue");
    var lightblue = document.getElementById("lightblue");
    var yellow = document.getElementById("yellow");
    var purple = document.getElementById("purple");
    var green = document.getElementById("green");
    var x = document.getElementById("devices");

    red.style.display = "none";
    wait(9000);
    red.style.display = "block";
    blue.style.display = "none";
    wait(9000);
    blue.style.display = "block";
    lightblue.style.display = "none";
    wait(9000);
    lightblue.style.display = "block";
    yellow.style.display = "none";
    wait(9000);
    yellow.style.display = "block";
    purple.style.display = "none";
    wait(9000);
    purple.style.display = "block";
    green.style.display = "none";
    wait(9000);
    green.style.display = "block";
  }, 2000);
}

Ожидание метод исходит из этого вопроса: Подождите 5 секунд перед выполнением следующей строки 

function wait(ms) {
  var start = new Date().getTime();
  var end = start;
  while (end < start + ms) {
    end = new Date().getTime();
  }
}

Установка метода анимации для выполнения в конце рендеринга 

<body onload="afterLoad()"> ... <body>

Я уже изменил SVG, и метод выполняется успешно, цвета выбираются, и они могут скрыться по мере выполнения кода, но не так, как ожидалось. Проблема в том, что браузер вылетает, это как попасть в al oop до конца анимации, но тоже не появляется. Если я проигнорирую время и, например, после рендеринга я просто хочу скрыть желтый цвет, метод будет выглядеть так и будет отлично работать: 

function afterLoad() {
  var yellow = document.getElementById("yellow");
  yellow.style.display = "none";
}

Но с секундами ожидания не работает. Это одна из проблем, что не работает анимация. Другая проблема заключается в том, что также не уверен, повторяется ли анимация с этой функцией. Я также пробовал с while(true) с ожиданием, но это приводит к сбою браузера (или почти). Как правильно обрабатывать анимацию?

Большое спасибо!

1 Ответ

0 голосов
/ 09 мая 2020

Эта функция wait() - плохая идея, поскольку она синхронна и блокирует браузер, предотвращая практически все.

Всегда лучше использовать setTimeout(), который является асинхронным и позволяет отображать to refre sh.

Чтобы упростить использование setTimeout, вы можете обернуть его в Promise, а затем использовать цепочку обещаний для последовательной анимации.

Вот функция ожидания, которая возвращает обещание, затем разрешается через указанный интервал времени: 

function waitPromise(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  });
}

Вот анимация, которая немного похожа на желаемый эффект, но использует асинхронный waitPromise(): 

function waitPromise(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  });
}

async function animate() {
  while (true) {
    await waitPromise(900);
    red.style.opacity = 0;
    await waitPromise(900);
    red.style.opacity = 1;
    blue.style.opacity = 0;
    await waitPromise(900);
    blue.style.opacity = 1;
    lightblue.style.opacity = 0;
    await waitPromise(900);
    lightblue.style.opacity = 1;
    yellow.style.opacity = 0;
    await waitPromise(900);
    yellow.style.opacity = 1;
    purple.style.opacity = 0;
    await waitPromise(900);
    purple.style.opacity = 1;
    green.style.opacity = 0;
    await waitPromise(900);
    green.style.opacity = 1;
  }
}

animate();
<body style="background-color: #aaa">
  <span id="red" style="color:red"> RED </span>
  <span id="blue" style="color:blue"> BLUE </span>
  <span id="lightblue" style="color:lightblue"> LIGHTBLUE </span>
  <span id="yellow" style="color:yellow"> YELLOW </span>
  <span id="purple" style="color:purple"> PURPLE </span>
  <span id="green" style="color:green"> GREEN </span>
</body>
...