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;