前端数值数据跳动起来，增加数据变化体验数字跳动组件！！

让你的数据值加载动起来！

描述：

数字跳动组件!

CountUp 组件用于展示数字在一定时间内逐渐增加到特定值的动画效果。可以在网页或应用程序中使用，为用户呈现一种动态的数据变化体验。

一、导入组件

npm install react-countup  

二、组件配置介绍

参数	说明	类型	默认值	备注
className	组件类名	String	--	--
decimal	小数的分隔符	String	句号（半角）	--
decimals	小数精准度	Number	0	四舍五入
delay	动画加载前的延迟	Number	5	单位 秒\S ，如何封装批量使用时，请注意添加 key 值，不然这个延迟效果会相互覆盖。
duration	动画持续时间	Number	2	单位 秒\S
end	动画加载结束值	Number	--	end 就是 跳动的 value 值。表示最后动画定格的值
prefix	数值前缀	String	--	--
redraw	更新时是否重新绘制动画	Boolean	false	--
preserveValue	数字动画结束后，若有需要更新是否保留最终值并继续更新	Boolean	false	--
separator	千位分隔符	String	逗号 （半角）	--
start	动画加载初始值	Number	0	--
suffix	数值后缀	String	--	--
useEasing	是否启用缓动效果	Boolean	true	--
useGrouping	是否开启分组分隔符	Boolean	true	--
useIndianSeparators	是否启用启用印度数字分隔符	Boolean	true	--
easingFn	指定自定义的缓动函数	Function	easeInExpo	--
formattingFn	自定义数值格式	Function	--	(value)=>void
enableScrollSpy	当组件出现在视野中是否启动动画加载	Boolean	false	这个用于页面很大，上下滚动时，该组件在页面视图中的显隐状态，是否在状态变化时加载跳动动画
scrollSpyDelay	出现在视野后，动画加载延迟	Number	0	--
scrollSpyOnce	是否仅加载一次	Boolean	--	--
onEnd	动画加载结束回调方法	Function	--	({ pauseResume, reset, start, update }) => void
onStart	动画开始回调方法	Function	--	({ pauseResume, reset, update }) => void
onPauseResume	暂时或者恢复时的回调	Functiion	--	({ reset, start, update }) => void
onReset	重置时的回调	Function	--	({ pauseResume, start, update }) => void
onUpdate	数据更新时的回调	Function	--	({ pauseResume, reset, start }) => void
组件实例方法
reset	重置初始值	Function	--	() => void
start	启动动画加载	Function	--	() => void
update	更新至最新值	Function	--	(newEnd: number?) => void
pauseResume	停止动画	Function	--	() => void
countUpRef	钩子函数获取Countup的属性	Function	--	() => void

三、 简单使用组件,实际效果

 完整代码：

import CountUp from 'react-countup';
const China = () => {
    return (
        <>
                <div style={{ fontSize: '32px' }}>
                   // 组件使用
                    <CountUp
                        key={1000}
                        // 动画结束值
                        end={9597000}
                        // 保留一位小数
                        decimals={1}
                        // 动画持续时间
                        duration={3}
                        // 动画延迟时间
                        delay={1}
                        // 千位分隔符
                        separator=','
                        // 数据初始值
                        start={0}
                        // 数据前缀
                        prefix='中华人民共和国国土面积：'
                        // 数据后缀
                        suffix='平方公里'
                        // 动画结束回调
                        onEnd={() => {
                            console.log('动画结束');
                        }}
                        // 动画开始回调
                        onStart={() => {
                            console.log('动画开始');
                        }}
                    />
                </div>
        </>
    );
};
export default China;

四、进阶使用 countUpRef 函数来配置使用CountUp 实例方法

        好像该组件目前是不支持 ref 的，所以使用该组件的实例方法还得用 countUpRef 来，，以下简单的举例使用该实例的方法

import { useRef } from 'react';
import CountUp, { useCountUp } from 'react-countup';
const CountUpRef = () => {
    // 定义实例
    const countUpRefs: any = useRef();
    // 定义 重置动画方法和重置初始值方法
    const { start, reset } = useCountUp({
        // 结束值
        end: 20,
        // 前缀
        prefix: '今日温度：',
        // 后缀
        suffix: '°C',
        // 动画持续时间
        duration: 3,
        // 绑定标签
        ref: countUpRefs,
        onEnd: ({ pauseResume, reset, start, update }) => {
            console.log('加载结束');
        }
    });
    return (
        <>
            // 绑定  CountUp 给div
            <div style={{ fontSize: '32px' }} ref={countUpRefs}></div>
           
             // 配置方法 
            <div>
              <button onClick={() => { start();}}>
                    重置动画
              </button>
              <button style={{margin:'0  10px'}} onClick={() => {reset();}} >
                 重置为 0
              </button>
            </div>
        </>
    );
};
export default CountUpRef;

效果图：