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 
}
CountTo.defaultProps={
    from:0, //min 0
    to:80, //max 100
    speed:0
}
export default CountTo;

 

你可能感兴趣的:(前端技术,react)