数字滚动动画~

原创

爱整活的啊程 2024-11-15 09:56:30 ©著作权

©著作权归作者所有：来自51CTO博客作者爱整活的啊程的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

数字从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)return
    let 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);
  }