Javascript.RU

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

Сообщение от рони Посмотреть сообщение
Lefseq,
чем анимация из поста #3 отличается от вашего примера?
В посте #3 число увеличивается от 1000 значения до 1632 без каких либо остановок.

Мне нужно, чтобы сначала через 3 секунды число дошло до 1249, затем остановилось, потом через 5 сек дошло до значения 1327... остановилось, затем через 9 сек до 1632.
Ответить с цитированием
  #12 (permalink)  
Старый 22.10.2019, 18:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Lefseq
затем остановилось,
добавил паузу
https://javascript.ru/forum/showthread.php?p=514372
Ответить с цитированием
  #13 (permalink)  
Старый 22.10.2019, 18:38
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от рони Посмотреть сообщение
добавил паузу
https://javascript.ru/forum/showthread.php?p=514372
У вас получается пауза каждые 3 секунды, мне надо чтобы длительность паузы была везде разная, и их можно было бы установить самому.
Также в вашем варианте если отложить по времени запуск последующего числа, то оно "крутится" медленнее, а надо чтобы "крутились" все числа с одной скоростью.
Ответить с цитированием
  #14 (permalink)  
Старый 22.10.2019, 18:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Lefseq
и их можно было бы установить самому.
что мешает сделать из let pause = 3000; массив пауз?
Ответить с цитированием
  #15 (permalink)  
Старый 22.10.2019, 18:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Lefseq
все числа с одной скоростью.
какие вы дали данные, с той скоростью и крутится.
let nums = [1249, 1327, 1632];
let secs = [3, 5, 9];
Ответить с цитированием
  #16 (permalink)  
Старый 22.10.2019, 19:03
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Сообщение от рони
что мешает сделать из let pause = 3000; массив пауз?
Я не умею этого делать.

Сообщение от рони
let secs = [3, 5, 9];
Ведь это не скорость вращения, тут нужно указать начало запуска.
Ответить с цитированием
  #17 (permalink)  
Старый 22.10.2019, 19:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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>
Ответить с цитированием
  #18 (permalink)  
Старый 22.10.2019, 19:32
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
Да, то что нужно. Спасибо. Рони, а можете еще сделать, чтобы отчет начинался не с 1000, а с нуля? И чтобы этот первый отчет запускался не сразу после захода на страницу а через 5 секунд, а последующие через, 10 и 15?
Ответить с цитированием
  #19 (permalink)  
Старый 22.10.2019, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #20 (permalink)  
Старый 22.10.2019, 19:59
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
Отлично! Это то что мне нужно было. Спасибо большое.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение переменной на 1 за каждые 3 числа в другой переменной Fungus Общие вопросы Javascript 5 03.07.2018 21:42
Увеличение числа в поле input каждые 5 секунд и нажатие на кнопку ArxRash Элементы интерфейса 11 31.05.2017 13:25
Плавное увеличение числа raler jQuery 5 19.01.2017 09:34
Увеличение числа параллельных ajax соединений 1lider AJAX и COMET 0 03.07.2014 17:46
Увеличение числа через заданный промежуток времени gambit88 Общие вопросы Javascript 4 04.12.2013 13:37