当前位置：首页 > news >正文

react实现动态递增展示数字特效

news 2025/8/24 23:01:30

在可视化展示界面时有一种场景，就是页面在初始化的时候，有些数字展示想要从某个值开始动态递增到实际值，形成一种动画效果。例如：

写一个数字递增的组件，有两种方式：1.固定步长，代码如下：

import {useEffect, useRef, useState} from 'react';const Counter = ({counts, time = 500}) => {  //counts：传入的数字，time: 默认500毫秒之内整个动画完成const [count, setCount] = useState(0);useEffect(() => {const step = counts <= time ? 1 : Math.ceil(counts / time);  // 两种情况：1.总数小于time时，就以每毫秒递增1的形式增加；2.总数大于500，计算出每毫秒至少要递增多少const timer = setInterval(() => { setCount((pre) => (pre + step > counts ? counts : pre + step));}, 1);return () => clearInterval(timer);}, [counts]);return count;}
export default Counter;

2.固定时间，代码如下：

import {useEffect, useRef, useState} from 'react';const Counter = ({counts, time = 500}) => {  //counts：传入的数字，time: 默认500毫秒之内整个动画完成const [count, setCount] = useState(0);useEffect(() => {let startTime = Date.now();let duration = 2000;const timer = setInterval(() => {setCount(() => {//数字增长逻辑：.定时操作let after = Math.ceil((Date.now()-startTime)/duration*counts*100)/100;if(after > counts) {clearInterval(timer);after = counts;}return after;});}, 16);return () => clearInterval(timer);}, [counts]);return count;}
export default Counter;

然后就可以在其他代码中引用该组件了: