让数字动起来~
实现效果
使用d3封装数字滚动组件,PlayNumber.tsx
import { useEffect, useRef, useState } from 'react';
import * as d3 from 'd3';
const PlayNumber = (props: any) => {
const numberRef: any = useRef();
const { number } = props;
const [oldNumber, setOldNumber] = useState(0);
const playCounter = (ref: any, start: number, end: number) => {
d3.select(ref)
.text(end)
.transition()
.duration(1000)
.tween('text', () => {
const i = d3.interpolate(start, end);
return (t: any) => {
ref.textContent = Math.round(i(t));
};
});
};
useEffect(() => {
playCounter(numberRef.current, oldNumber, number);
setOldNumber(number);
}, [number]);
return <span ref={numberRef}>0</span>;
};
export default PlayNumber;
项目中的使用示例
<ul className="card-project-number">
<li>
<PlayNumber number={total} />
<div>本年度项目总数</div>
</li>
<li>
<div className="project-status primary">未开始</div>
<PlayNumber number={notStart} />
</li>
<li>
<div className="project-status success">进行中</div>
<PlayNumber number={progress} />
</li>
<li>
<div className="project-status warning">已完成</div>
<PlayNumber number={finished} />
</li>
</ul>