公司项目需要做一个数字显示器,让我找到一个有趣的项目——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}
/>
这样写只需要加数字和单位即可,还可以多次复用,是不是很优雅?