CountUp.js( 轻量级数字动画插件 )-Toy模板网

这篇具有很好参考价值的文章主要介绍了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