Блог

Главная - Вопросы по программированию - Как мне создать анимированное число, добавляя значение каждую секунду

Как мне создать анимированное число, добавляя значение каждую секунду

#javascript #jquery #jquery-animate

#javascript #jquery #jquery-анимировать

Вопрос:

Как мне создать анимированное число, добавляя значение каждую секунду. Как в этом плагине http://aishek.github.io/jquery-animateNumber

HTML

 <div class="earned">171655.10457862</div>

Вот код jQuery

 var DOGEbal = 171655.10457862;
var per_second = 1.56948984;
interval = setInterval(function(){
  DOGEbal  = per_second;
  DOGEbalStack = DOGEbal.toString();
  DOGEbalStack = DOGEbalStack.slice(0, (DOGEbalStack.indexOf(".")) 9);
  $(".earned").html(DOGEbalStack);
}, 1000);

Итак, я хотел бы анимировать добавление числа per_second к .earned . Делаю это каждую секунду, как в плагине animateNumber

Вот https://jsfiddle.net/uzd83qw6/1 / пример. Как анимировать этот пример?

Комментарии:

1. Не уверен, в чем здесь ваш вопрос. В этом примере fiddle есть «анимированное» число, которое увеличивается каждую секунду.

2. @Jeto Этот пример в fiddle не анимирован. Пожалуйста, посмотрите на пример расширения. Это анимированное. В скрипке просто увеличивается с каждой секундой…

3. Здесь нет анимации. Что вы хотите, так это записать каждое число между текущим и следующим числом. Вам просто нужен цикл, который переходит от текущего к следующему, и распечатайте его.

4. Просто замените 1000 на 10, а 1,5 xxx на 0,015xxx, и оно будет анимировано

5. Тот факт, что число изменяется через все промежуточные числа, создает впечатление движения, отсюда и анимация. Он просто печатает много чисел перед печатью окончательного числа.

Ответ №1:

Вы могли бы использовать свой «шаг за секунду» и преобразовать его в задержку «за миллисекунду»:

 function animate($target, fromValue, incrementPerSecond) {
  var incrementPerMillisecond = incrementPerSecond / 1000;
  var currentValue = fromValue;

  $target.text(currentValue);
  setInterval(function () {
    $target.text((currentValue   incrementPerMillisecond).toFixed(8));
    currentValue  = incrementPerMillisecond;
  }, 1);
}

animate($('.earned'), 171655.10457862, 1.56948984);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="earned"></div>

Комментарии:

1. incrementPerSecond / 10 и setInterval to 100 кажется, что это лучше. Спасибо