前段时间公司项目需要迭代更新，在这个更新的过程中就添加了一个大数据的数字滚动效果。这让我发现了一个既有趣上手又快的React插件，下面我们看看效果如何。
官网的demo：https://inorganik.github.io/countUp.js/
安装
- 使用npm或者yran都可以：
npm install react-countup --save
安装好后在package.json中可以看到countup的版本号
项目中引用
import CountUp from "react-countup";
在对应计数的地方设置开始数字和结束数字：
<CountUp start={0} end={110} duration="3" />
除了这些基本的属性外，还有一些有趣的属性，比如下面的：
- 小数位数，decimals: number
- 设置宽松，一般情况是true，useEasing: boolean
- 设置分组功能，设为true才能用千位分割器等功能，useGrouping: boolean
- 指定千位分隔符的字符，比如说最常见的”,”，separator: string
- 指定小数字符，decimal: string
- 动画值前缀，prefix: string
- 动画值后缀，可以加单位，suffix: string
- span元素的CSS类名，className: string
- 如果设置为true，CountUp组件将始终在每个重新渲染上进行动画处理，redraw: boolean
- 动画完成后调用的函数，onComplete: function
- 在动画开始前调用的函数，onStart: function
- Easing function，一般用不到，easingFn: function
- 用于自定义数字格式的方法，formattingFn: function
