animejs float numbers

Question

Я пытаюсь анимировать заполнение числа от 0.00 до 100.00% с помощью anime.js

но когда число анимируется после запятой появляется слишком много символов Так как ниже

let text = document.querySelector('p')
let procent = parseFloat(text.dataset.procent) 

let anim = anime({
    loop: false,
    autoplay: false,
    targets: text,
    innerHTML: `${procent}%`,
    duration: 4000,
    easing: 'linear'
})
anim.play()

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>

<p data-procent="75.23">0.00%</p>

Я хочу чтобы у меня было фиксировано 2 числа после запятой

Answer 1

const text = document.querySelector('p');
let procent = parseFloat(text.dataset.procent);

const anim = anime({
  loop: false,
  autoplay: false,
  targets: text,
  textContent: procent,
  round: 100,             // ◄◄◄
  duration: 4000,
  easing: 'linear',
});
anim.play();

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>

<p data-procent="75.23">0.00%</p>

Параметр round описан в документации библиотеки.

БЛОГ НА HUSL

animejs float numbers

Ответы (1 шт):