React数字滚动，增加或减少效果

效果：

 

组件：（NumberScroller.jsx）

/**
 * 数字滚动效果
 */
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

const NumberScroller = ({ targetValue = 0, decimalPlaces = 0, duration = 2000 }) => {
    const [value, setValue] = useState(0);

    useEffect(() => {
        const start = performance.now();
        const interval = setInterval(() => {
            const elapsed = performance.now() - start;
            const progress = elapsed / duration;
            const newValue = value + (targetValue - value) * progress;
            setValue(newValue);

            if (progress >= 1) {
                clearInterval(interval);
                setValue(targetValue);
            }
        }, 10);

        return () => clearInterval(interval);
    }, [targetValue, duration]);

    return <div style={{ fontSize: 80 }}>{value.toFixed(decimalPlaces)}</div>;
};

NumberScroller.propTypes = {
    // 目标值
    targetValue: PropTypes.number,
    // 保留多少位小数
    decimalPlaces: PropTypes.number,
    // 滚动速率（数字越大，滚动越慢）
    duration: PropTypes.number,
};

export default NumberScroller;

 

测试：

import { useEffect, useState } from 'react';

import NumberScroller from './NumberScroller';

const Page = () => {
    const [targetValue, setTargetValue] = useState(Math.random() * 2000);

    useEffect(() => {}, []);

    return (
        <div className="test" style={{ padding: 20 }}>
            <NumberScroller targetValue={targetValue} />
            <button
                onClick={() => {
                    setTargetValue(Math.random() * 2000);
                }}
            >
                更改
            </button>
        </div>
    );
};

export default Page;