22.10.2019, 17:56
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
Сообщение от рони
|
Lefseq,
чем анимация из поста #3 отличается от вашего примера?
|
В посте #3 число увеличивается от 1000 значения до 1632 без каких либо остановок.
Мне нужно, чтобы сначала через 3 секунды число дошло до 1249, затем остановилось, потом через 5 сек дошло до значения 1327... остановилось, затем через 9 сек до 1632. |
|
22.10.2019, 18:38
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
У вас получается пауза каждые 3 секунды, мне надо чтобы длительность паузы была везде разная, и их можно было бы установить самому.
Также в вашем варианте если отложить по времени запуск последующего числа, то оно "крутится" медленнее, а надо чтобы "крутились" все числа с одной скоростью. |
|
22.10.2019, 18:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Lefseq
|
|
и их можно было бы установить самому.
|
что мешает сделать из let pause = 3000; массив пауз? |
|
22.10.2019, 18:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Lefseq
|
|
все числа с одной скоростью.
|
какие вы дали данные, с той скоростью и крутится.
let nums = [1249, 1327, 1632];
let secs = [3, 5, 9];
|
|
22.10.2019, 19:03
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
|
Сообщение от рони
|
|
что мешает сделать из let pause = 3000; массив пауз?
|
Я не умею этого делать.
|
Сообщение от рони
|
|
let secs = [3, 5, 9];
|
Ведь это не скорость вращения, тут нужно указать начало запуска. |
|
22.10.2019, 19:12
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Lefseq
|
|
Ведь это не скорость вращения, тут нужно указать начало запуска.
|
не понимаю.
|
Сообщение от 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, 7000, 0 ]; //пауза, после которой, запустится следущаяя анимация
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[i]);
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>
|
|
22.10.2019, 19:32
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
|
рони,
Да, то что нужно. Спасибо. Рони, а можете еще сделать, чтобы отчет начинался не с 1000, а с нуля? И чтобы этот первый отчет запускался не сразу после захода на страницу а через 5 секунд, а последующие через, 10 и 15?
|
|
22.10.2019, 19:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Lefseq,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="num"></div>
<script>
let nums = [0, 1249, 1327, 1632];// до какого числа анимировать
let secs = [0, 3, 5, 9];//сколько времени будет длится анимация
let pause = [5, 10, 15, 0 ]; //пауза, после которой, запустится следущаяя анимация
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[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);
}
})();
</script>
</body>
</html>
|
|
22.10.2019, 19:59
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.04.2019
Сообщений: 124
|
|
|
рони,
Отлично! Это то что мне нужно было. Спасибо большое.
|
|
|
|
