countUp.js在react中的应用

公司项目需要做一个数字显示器，让我找到一个有趣的项目——CountUp.js。它是一个免费的轻量级javaScript工具，可用于快速创建动画，以更有趣的方式显示数字数据。作用：动画显示数字，千位分隔符，添加前后缀等等。

demo在查看CountUp.js工具demo

github在countUp的GitHub，
已经有四千多的Star了，但是只有两条issues，这说明什么，几乎所有人都可以迅速上手得到自己想要的结果而没什么bug出现，只能说一句，强！

首先，它支持了Angular，React，Vue三大框架和WordPress，基本写前端的都能用了有木有，由于我们用的是react，所以就打开React的部分看看。

安装

使用npm或yarn均可

yarn add react-countup

npm install react-countup --save

使用

我们看demo页的例子是最直观的

先做一个最简单的例子：

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

render(
  <CountUp start={0} end={160526} />,
  document.getElementById('root')
);

上述代码设置了从0开始到160526的数字变化。

把所有的属性都拖出来瞧瞧：

• start: number

开始值

• end: number

结束值

• duration: number

动画完成用时，以秒为单位

• decimals: number

小数位数

• useEasing: boolean

设置宽松，一般情况是true

• useGrouping: boolean

设置分组功能，设为true才能用千位分割器等功能

• separator: string

指定千位分隔符的字符，比如说最常见的”,”

• decimal: string

指定小数字符

• prefix: string

动画值前缀

• suffix: string

动画值后缀，可以加单位

• className: string

span元素的CSS类名

• redraw: boolean

如果设置为true，CountUp组件将始终在每个重新渲染上进行动画处理。

• onComplete: function

动画完成后调用的函数

• onStart: function

在动画开始前调用的函数

• easingFn: function

Easing function，一般用不到

• formattingFn: function

用于自定义数字格式的方法

再做一个复杂点的例子：

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';

const onComplete = () => {
  console.log('Completed! ?');
};

const onStart = () => {
  console.log('Started! ?');
};

render(
  <CountUp
    className="account-balance"
    start={160527.0127}
    end={-875.0319}
    duration={2.75}
    useEasing={true}
    useGrouping={true}
    separator=" "
    decimals={4}
    decimal=","
    prefix="EUR "
    suffix=" left"
    onComplete={onComplete}
    onStart={onStart}
  />,
  document.getElementById('root'),
);

放在实际项目中，我们用的是dva，

import CountUp from 'react-countup';

...
<CountUp
    start={0}
    end={bls}
    duration={2.75}
    useEasing
    useGrouping
    separator=","
    suffix="份"
/>

这是最常用的写法和属性

如果我们有多个需要显示数字的地方，每次都这样写未免臃肿

这时候可以这样

import CountUp from 'react-countup';

...
const countUpProps = {
    start: 0,
    duration: 2.75,
    useEasing: true,
    useGrouping: true,
    separator: ',',
};
<CountUp
    end={bls}
    suffix="份"
    {...countUpProps}
/>

这样写只需要加数字和单位即可，还可以多次复用，是不是很优雅？