react实现数字滚动
React 实现数字滚动效果
在 React 中实现数字滚动效果可以通过多种方式完成，以下是几种常见的方法：
使用 CSS 动画
通过 CSS 的 transition 或 animation 属性实现数字平滑滚动：
import React, { useState, useEffect } from 'react';
const NumberScroller = ({ targetNumber }) => {
const [currentNumber, setCurrentNumber] = useState(0);
useEffect(() => {
const duration = 2000; // 动画持续时间
const startTime = performance.now();
const updateNumber = (currentTime) => {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
const nextNumber = Math.floor(progress * targetNumber);
setCurrentNumber(nextNumber);
if (progress < 1) {
requestAnimationFrame(updateNumber);
}
};
requestAnimationFrame(updateNumber);
}, [targetNumber]);
return <div className="number-display">{currentNumber}</div>;
};使用第三方库
react-countup 是一个专门用于数字滚动动画的库：
import React from 'react';
import CountUp from 'react-countup';
const NumberScroller = ({ number }) => (
<CountUp
end={number}
duration={2.5}
separator=","
/>
);自定义 Hook 实现
封装一个可复用的数字滚动 Hook：
import { useState, useEffect } from 'react';
const useNumberScroll = (target, duration = 2000) => {
const [current, setCurrent] = useState(0);
useEffect(() => {
let start = null;
const animate = (timestamp) => {
if (!start) start = timestamp;
const progress = timestamp - start;
const increment = (target / duration) * progress;
setCurrent(Math.min(increment, target));
if (progress < duration) {
window.requestAnimationFrame(animate);
}
};
window.requestAnimationFrame(animate);
}, [target, duration]);
return Math.floor(current);
};
// 使用示例
const DisplayNumber = ({ value }) => {
const displayedNumber = useNumberScroll(value);
return <span>{displayedNumber}</span>;
};带缓动函数的动画
添加缓动效果使滚动更自然：
const easeOutQuad = (t) => t * (2 - t);
const NumberScroller = ({ value }) => {
const [number, setNumber] = useState(0);
useEffect(() => {
let start = null;
const duration = 1500;
const step = (timestamp) => {
if (!start) start = timestamp;
const elapsed = timestamp - start;
const progress = easeOutQuad(Math.min(elapsed / duration, 1));
setNumber(Math.floor(progress * value));
if (elapsed < duration) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}, [value]);
return <div>{number.toLocaleString()}</div>;
};格式化数字显示
添加千位分隔符和单位显示：
const formatNumber = (num) => {
if (num >= 1000000) {
return `${(num / 1000000).toFixed(1)}M`;
}
if (num >= 1000) {
return `${(num / 1000).toFixed(1)}K`;
}
return num.toLocaleString();
};
// 在组件中使用
const Display = ({ value }) => {
const number = useNumberScroll(value);
return <div>{formatNumber(number)}</div>;
};这些方法可以根据项目需求选择使用，CSS 动画方式性能较好，第三方库实现最快捷，自定义 Hook 灵活性最高。
