CountUp.js( 轻量级数字动画插件 )

最近在项目开发中，发现经常会有需求要求数字有计数动画的效果。所以这里也是收集了一个非常好用的计数动画插件。给大家分享一下~

文章目录

前言

随着可视化的发展，公司大屏可视化的项目越来愈多，而开发可视化不可避免的要用到一些数字动画之类的，下面给大家介绍一个轻量级的数字动画插件 CountUp.js。

一、CountUp.js( 轻量级数字动画插件 )

CountUp.js是基于JS一个数字动画插件，目的是为使页面的上的数字在初始时有过一个累加的动画效果。

二、使用步骤

1.下载地址:

https://github.com/inorganik/CountUp.js;

2.使用方法

代码如下（示例）：

// 数字动画
var options ={
    useEasing: true,// 使用缓和
    useGrouping: false,// 使用分组(是否显示千位分隔符,一般为 true)
    separator:',',// 分隔器(千位分隔符,默认为',')
    decimal:'.',// 十进制(小数点符号,默认为 '.')
    prefix:'',// 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
    suffix:''// 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等) };// CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)// 参数一: 数字所在容器// 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长// 参数三: 数字增长后的最终值,该值一般通过异步请求获取// 参数四: 数字小数点后保留的位数// 参数五: 数字增长特效的时间,此处为3秒// 参数六: 其他配置项// 注: 参数六也可不加,其配置项则为默认值
new CountUp("num1",0,123000,0,3, options).start();
new CountUp("num2",0,123000,0,3, options).start();
new CountUp("num3",0,123000,0,3, options).start();

3.如何在vue中使用CountUp.js

示例如下：

// 安装插件
npm install countup.js vue-count-to

// 代码示例<template><countTo :startVal='startVal':endVal="endVal":duration='duration':separator="separator" ref="CountToPower"></countTo ></template><script>
  import countTo from 'vue-count-to';
  export default{
    components:{ countTo },data(){return{
        startVal:0,
        endVal:2017,
        duration:5000,// 持续时间
        separator:'',// 分隔符}}}</script>

注意：

startVal、endVal的值必须是Number类型的，如果是String类型，虽然能正常显示但是控制台会报错
其中比较常用的属性就是
startVal   => 初始值
endVal    => 结束值
duration  => 持续时间，毫秒
autoplay => 是否自动开始，布尔值
decimals => 小数位数
还有分隔符separator，小数点decimal，前缀prefix，后缀suffix，值都是字符串类型
最关键的是可以使用缓动函数(easing function)，来自定义计数变化的速率。
用useEasing来确定是否开启使用缓动函数，easingFn写入缓动函数。

附上原文档链接：https://github.com/PanJiaChen/vue-countTo
demo链接：vue-count-to

总结

本文仅仅简单介绍了CountUp.js的使用，有不对的地方请大家多多指正。