Как сделать, чтобы анимация числа работала не только при активном окне?
Здравствуйте. Имеется анимация, которая увеличивает число до нужного значения через определенный интервал времени. Но проблема в том, что данная анимация работает только при активной окне, т.е. при переходе на другую вкладку (не закрывая страницу с анимацией) отчет останавливается. Как сделать так, чтобы анимация работала в соответствии с установленным интервалом вне зависимости от того активное окно с кодом в данный момент или нет?
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> |
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); } })(); |
1 > b && setTimeout(e, 80)
Это не сработает. В фоновых вкладках минимальное время таймаута может увеличиваться до 10 сек |
Не получится да и не должно. Нехрен скрытой вкладке крутить анимацию, которую никто не увидит. Отлавливайте активацию вкладки и без лишних телодвижений на основе разницы времени устанавливайте нужный кадр.
|
рони,
Спасибо, Рони. Интервал бывает незначительно запаздывает, но в целом анимация идет и все работает. |
Часовой пояс GMT +3, время: 00:12. |