数字动画-countup

 

1-参考文档  react-countupGitHub - glennreyes/react-countup: 💫 A configurable React component wrapper around CountUp.js

/*
 * @Description: 描述
 * @Author: cy
 * @Date: 2024/12/24
 */

import React, { useState, useRef, useEffect } from "react";
import { Statistic, Progress } from "antd";
import Countup, { useCountUp } from "react-countup";
function Num(props) {
  const ref = useRef(null);

  const { value, color, precision } = props;
  const { start, pauseResume, reset, update } = useCountUp({
    ref: ref,
    start: 0,
    end: value,
    decimals: precision,
    // separator: "",
    // delay: 1000,
    duration: 2.5,
    // onReset: () => console.log("Resetted!"),
    // onUpdate: () => console.log("Updated!"),
    // onPauseResume: () => console.log("Paused or resumed!"),
    // onStart: ({ pauseResume }) => console.log(pauseResume),
    // onEnd: ({ pauseResume }) => console.log(pauseResume),
  });
  useEffect(() => {
    if (value) {
      update(value);
    }
  }, [value]);
  return <div ref={ref} />;

  const formatter = (value) => (
    <CountUp
      start={0}
      duration={2}
      end={value}
      separator=""
      decimals={precision}
      onEnd={() => {}}
    />
  );

  return (
    <Statistic
      value={value}
      precision={precision || 1}
      formatter={formatter}
      valueStyle={{
        fontSize: "48px",
        lineHeight: "53px",
        color: color || "#fff",
        fontFamily: "cy",
      }}
    />
  );
}

export default Num;

如果不在乎起点可以直接用组件