jquery轻量级数字动画插件countUp.js使用详解

一、什么是countUp.js

countUp.js 是一款非常流行的 jQuery 数字动画插件，可以方便地实现数字的动态变化效果，可以用于展示数字统计、倒计时等场景。

二、countUp.js 的优劣势

优点：

1. 简单易用，使用方便。
2. 支持数值格式化，可以自定义数值变化的格式样式。
3. 支持在动画过程中进行回调函数的调用。

缺点：

如果要实现复杂的动画效果，需要自定义插件源码，比较麻烦。

三、countUp.js 的使用方法

1. 引入插件

在 HTML 中引入 jQuery 和 countUp.js 插件：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/countUp.js"></script>

如果你的项目中已经引入了 jQuery，则不需要再次引入。

2. HTML 结构

在需要添加数字动画的页面中，添加一个元素：

<span id="countUp"></span>

3. 编写 JavaScript 代码

在 JavaScript 文件中编写以下代码：

$(document).ready(function(){
    var options = {
        useEasing : true, // 是否启用缓动效果
        useGrouping : true, // 是否启用千分位分组
        separator : ',', // 千位分隔符
        decimal : '.', // 小数点
        prefix : '', // 前缀
        suffix : '' // 后缀
    };
    var countUp = new CountUp('countUp', 0, 1000, 0, 2.5, options); // countUp 参数解释
    countUp.start(); // 开始数字动画
});

参数解释：

• 'countUp'：需要添加数字动画的元素 ID。
• 0：起始数字。
• 1000：结束数字。
• 0：小数位数。
• 2.5：动画持续时间（秒）。
• options：传递 CountUp.js 配置，例如：是否启用缓动效果、是否启用千分位分组等。

4. 定制动画效果

如果你想让数字动画的过程更加缓慢，可以在选项中设置缓动效果，例如：

var options = {
    useEasing : true, // 是否启用缓动效果
    easingFn: easeOutExpo // 缓动函数
};

还可以自定义缓动函数：

function customEasingFn(t, b, c, d) {
    return c * (t /= d) * t + b;
}

5. 数值格式化

如果你想自定义数值的变化格式，例如添加前缀、后缀、指定小数位数等等，可以在选项中设置：

var options = {
    useEasing : true, // 是否启用缓动效果
    useGrouping : true, // 是否启用千分位分组
    separator : ',', // 千位分隔符
    decimal : '.', // 小数点
    prefix : '￥', // 前缀
    suffix : '元' // 后缀
};

6. 回调函数

如果你想在数字动画过程中添加回调函数，例如动画结束后执行某个操作：

var countUp = new CountUp('countUp', 0, 1000, 0, 2.5, options, function() {
    console.log('数字动画结束！');
});

四、countUp.js 的示例展示

示例一：数字统计

HTML 结构：

<h1 id="count1">0</h1>
<button id="start1">开始数字动画</button>

JavaScript 代码：

$(document).ready(function(){
    var countUpOptions = {
        useEasing : true,
        useGrouping : true,
        separator : ',',
        decimal : '.',
        prefix : '',
        suffix : ''
    };
    var countUp = new CountUp('count1', 0, 1000, 0, 2.5, countUpOptions);

    $('#start1').click(function(){
        countUp.reset();
        countUp.start();
    });
});

效果展示：点击查看

示例二：倒计时

HTML 结构：

<h2>距离离小年还有<span id="count2"></span>秒</h2>

JavaScript 代码：

$(document).ready(function(){
    var countUpOptions = {
        useEasing : true,
        useGrouping : true,
        separator : ',',
        decimal : '.',
        prefix : '',
        suffix : ''
    };
    var countUp = new CountUp('count2', 0, 60, 0, 30, countUpOptions);

    countUp.start();
    setInterval(function(){
        countUp.reset();
        countUp.start();
    }, 30000);
});

效果展示：点击查看。