如何在React中写出有趣的数字滚动动画

前段时间公司项目需要迭代更新，在这个更新的过程中就添加了一个大数据的数字滚动效果。这让我发现了一个既有趣上手又快的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