前言

數字從0.00滾動到某個數值的動畫

實現（React版本）

Dom

<div className="number" ref={numberRef}>0.00</div>

?JS

  const _initNumber = () => {const targetNumber = 15454547.69;const duration = 1500;const numberElement = numberRef.current;if(!numberElement)returnlet startTime = null;function formatNumber(num) {return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });}function animateNumber(timestamp) {if (!startTime) startTime = timestamp;const progress = timestamp - startTime;const currentNumber = Math.min(progress / duration * targetNumber, targetNumber);const currentFormattedNumber = formatNumber(currentNumber);const totalLength = formatNumber(targetNumber).length;const currentLength = Math.floor(progress / duration * totalLength);const displayNumber = currentFormattedNumber.slice(0, currentLength);numberElement.textContent = displayNumber;if (progress < duration) {requestAnimationFrame(animateNumber);} else {numberElement.textContent = formatNumber(targetNumber);}}requestAnimationFrame(animateNumber);}

效果

?

最后

通過requestAnimationFrame去實現動畫效果，toLocaleString做整數數值三位分割~