公司專案需要做一個數字顯示器，讓我找到一個有趣的專案——CountUp.js。它是一個免費的輕量級javaScript工具，可用於快速建立動畫，以更有趣的方式顯示數字資料。作用：動畫顯示數字，千位分隔符，新增前後綴等等。

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}
/>

這樣寫只需要加數字和單位即可，還可以多次複用，是不是很優雅？