Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2020, 22:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Lefseq,
попробуйте так
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;
  setTimeout( function e() {
  let b = performance.now()
  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 && setTimeout(e, 80)
}, 80)
}
const delay = i => new Promise(r => anim(i, r));

(async () => {
	for (let i = 0; i < secs.length; i++) {
	    await delay(i);
	}
})();
Ответить с цитированием
  #3 (permalink)  
Старый 06.03.2020, 22:47
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

1 > b && setTimeout(e, 80)

Это не сработает. В фоновых вкладках минимальное время таймаута может увеличиваться до 10 сек
Ответить с цитированием
  #4 (permalink)  
Старый 06.03.2020, 22:57
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Не получится да и не должно. Нехрен скрытой вкладке крутить анимацию, которую никто не увидит. Отлавливайте активацию вкладки и без лишних телодвижений на основе разницы времени устанавливайте нужный кадр.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 07.03.2020, 09:53
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
Спасибо, Рони. Интервал бывает незначительно запаздывает, но в целом анимация идет и все работает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 0 12.10.2016 18:58
Как сделать чтобы срабатывал onload элемента при добавлении на страницу Conus Events/DOM/Window 2 10.06.2016 10:58
Как сделать так чтобы тут в pupop окне показывалась не сайт : http://www.foo-site.ru sarik Общие вопросы Javascript 1 05.03.2013 10:33
Как сделать, чтобы музыка <embed> на странице не играла только при первом посещении? Bad Request Общие вопросы Javascript 22 27.07.2009 19:44
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24