Показать сообщение отдельно
  #1 (permalink)  
Старый 06.03.2020, 21:47
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Как сделать, чтобы анимация числа работала не только при активном окне?
Здравствуйте. Имеется анимация, которая увеличивает число до нужного значения через определенный интервал времени. Но проблема в том, что данная анимация работает только при активной окне, т.е. при переходе на другую вкладку (не закрывая страницу с анимацией) отчет останавливается. Как сделать так, чтобы анимация работала в соответствии с установленным интервалом вне зависимости от того активное окно с кодом в данный момент или нет?

let nums = [0, 16249, 36721, 53029, 81583, 124819]; // до какого числа анимировать
let secs = [0, 1, 1, 1, 1, 1]; //сколько времени будет длиться анимация
let pause = [3, 3, 3, 3, 3, 0]; //пауза, после которой, запустится следующая анимация
const elem = document.querySelector('.numnew');
const anim = (i, r) => {
  let d = performance.now(),
  from = +elem.textContent,
  to = nums[i],
  duration = secs[i] * 1000;
  requestAnimationFrame( function e(b) {
  b = (b - d) / duration;
  1 <= b && (b = 1);
  let c = from + (to - from) * b | 0;
  elem.innerHTML = c;
  b == 1 && setTimeout(r,pause[i] * 1000);
  1 > b && requestAnimationFrame(e)
})
}
const delay = i => new Promise(r => anim(i, r));

(async () => {
	for (let i = 0; i < secs.length; i++) {
	    await delay(i);
	}
})();


<span class="numnew">0</span>
Ответить с цитированием