svg环形进度图react-circle添加动画效果

num用于更新次数，做比例计算

count为进度变化值 

主要实现步骤：

setCount(parseFloat(to*num*0.1).toFixed(2))

import React, { useEffect,useState } from 'react';
import Circle from "react-circle";

const CountTo=(props)=>{
    const {from,to,speed}=props;
    const [num,setNumber]=useState(0)
    const [count,setCount]=useState(from)
    useEffect(()=>{

        const interval=setInterval(()=>{
            if (num!=11){
                setNumber(num+1)
                setCount(parseFloat(to*num*0.1).toFixed(2))
            }
        },speed)

        return ()=>clearInterval(interval)
    });

    return <Circle size='54' lineWidth="40" textColor="#ffffff" bgColor="rgb(82, 147, 204)" progressColor="#ffffffad"
                   progress={ count}/>
}
CountTo.defaultProps={
    from:0, //min 0
    to:80, //max 100
    speed:0
}
export default CountTo;