数字滚动特效实现（react + d3）

让数字动起来~

实现效果

使用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>