count-up-es-react
yarn add count-up-es-react
// or
npm i count-up-es-react
該組件是一個(gè)在指定時(shí)間內(nèi)盛杰，從一個(gè)數(shù)字動(dòng)態(tài)變化到另一個(gè)數(shù)字，動(dòng)畫(huà)類(lèi)型豐富翰绊，涵蓋了非常多的easing動(dòng)畫(huà)算法，值得推薦使用奥喻，特別適合開(kāi)發(fā)大屏使用。
demo圖片示例：
C.gif
搭配自定義字體使用：
A.gif
*** 動(dòng)圖掉幀情況看著效果不好非迹，實(shí)際動(dòng)畫(huà)很平滑
簡(jiǎn)單例子
import { CountUp } from 'count-up-es-react';
const MyComponent = () => (
<div>
<CountUp start={0} end={200} duration={3000} />
</div>
);
自定義渲染（搭配antd組件使用）
<CountUp
start={0}
end={617}
duration={2000}
easing={'easeOutExpo'}
autoResetKey={[refresh]}
render={({ value }) => {
return (
<>
<Statistic
precision={0}
title="新能源車(chē)輛銷(xiāo)量"
value={value as any}
valueStyle={{ color: 'red' }}
suffix="輛"
prefix={<ArrowUpOutlined />}
/>
</>
);
}}
/>
