动画显示数字 countUp.js

CountUp.js。它是一个免费的轻量级javaScript工具，可用于快速创建动画，以更有趣的方式显示数字数据。作用：动画显示数字，千位分隔符，添加前后缀等等。

项目地址：https://github.com/inorganik/CountUp.js
demo：https://inorganik.github.io/countUp.js/

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

安装

使用npm或yarn均可

yarn add react-countup
// or
npm install react-countup --S

使用

参考demo页的例子。

一个最简单的例子：

import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';
render(
  <CountUp start={0} end={87322342} />,
  document.getElementById('root')
);

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

参数说明

• start: number 开始值
• end: number 结束值
• duration: number 动画完成用时，以秒为单位
• decimalPlaces :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={420527.01}
    end={0}
    duration={2.5}
    useEasing={true}
    useGrouping={true}
    separator=" "
    decimalPlaces={2}
    decimal=","
    prefix="¥"
    suffix=" left"
    onComplete={onComplete}
    onStart={onStart}
  />,
  document.getElementById('root'),
);

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

import CountUp from 'react-countup';
...
<CountUp
    start={0}
    end={endsNumber}
    duration={2.5}
    useEasing
    useGrouping
    separator=","
    suffix=""
/>