Анимированное увеличение числа
Здравствуйте. Помогите пожалуйста, сделать так, чтобы ниже приведенный скрипт увеличивал число анимированно (чтобы цифры крутились будто счетчик).
<div class="num">1000</div> let nums = [1249, 1327, 1632]; let secs = [3, 5, 9]; const delay = sec => new Promise(r => setTimeout(r,sec*1000) ); (async () => { for (let i = 0; i < secs.length; i++) { await delay(secs[i]); document.querySelector('.num').textContent = nums[i]; } })(); |
Цитата:
|
фейковый счётчик с анимацией
Lefseq,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <div class="num">1000</div> <script> let nums = [1249, 1327, 1632]; let secs = [3, 5, 9]; let pause = 3000; const elem = document.querySelector('.num'); 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); 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); } })(); </script> </body> </html> |
Цитата:
|
Lefseq,
??? |
рони,
Мне нужно чтобы вот так: https://codepen.io/Mr_Sergo/pen/WNNoYvK?editors=1010 Но появление чисел с анимацией. |
Цитата:
|
Lefseq,
что такое анимация, можно пример? |
Цитата:
|
Lefseq,
чем анимация из поста #3 отличается от вашего примера? |
Часовой пояс GMT +3, время: 05:30. |