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

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

文章目录

• 前言
• 一、CountUp.js( 轻量级数字动画插件 )
• 二、使用步骤
• • 1.下载地址:
  • 2.使用方法
  • 3.如何在vue中使用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
    // 代码示例
    
      
    
    
      import countTo from 'vue-count-to';
      export default {
        components: { countTo },
        data () {
          return {
            startVal: 0,
            endVal: 2017,
            duration: 5000, // 持续时间
            separator: '', // 分隔符
          }
        }
      }
    
    

    注意：

    
    （图片来源网络，侵删）

    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的使用，有不对的地方请大家多多指正。

    
    （图片来源网络，侵删）