countUp插件用法-数字跳动特效

很多大屏、官网或者展示类页面会用到数字跳动更新效果的需求，可以试试countUp插件。我这里没有放动图，具体实现效果可以搜搜，主要写一下基本用法。

countup.js是一个无依赖性、轻量级的javascript类，可用于快速创建动画，以更有趣的方式显示数字/数据。

使用：

1. 可以下载js文件进行引入

(1) 、下载地址：

https://github.com/inorganik/CountUp.js;
(2)、 写入

import { CountUp } from './countUp.min.js';
 
window.onload = function () { 
var countUp = new CountUp('myElementId', 2000); 
if (!countUp.error) { 
   countUp.start(); 
 } else { 
   console.error(countUp.error); 
} }

如果script写在body最底下，那么window.onload就也不需要了。

2、直接安装依赖

 npm install countup  进行安装依赖

 import CountUp from "countup"  在页面中引入

new出CountUp构造函数后，可以传入参数，而第一个参数为元素的id，第二个为跳动的end值，第三个为{}对象，这里简单说一下第三个参数有哪些参数可以设置。

 initCountUp(dom, data) {
    let totalData = new CountUp(dom, data, {
        startVal: 0,  // 跳动起始数字
        useGrouping: false,  // 是否开启逗号，默认true
      });
    totalData.start(); // 启动 start函数支持传入一个回调函数作为参数
  }

{

  startVal: 20,

  decimalPlaces: 2,

  duration: 5,

  useGrouping: true,

  useEasing: true,

  smartEasingThreshold: 500,

  smartEasingAmount: 300,

  separator: ',',

  decimal: '.',

  prefix: '￥',

  suffix: '元',

 numerals: ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']

}

 

 

 

 

 

 

 

 

 

 

 

 

 

需要注意的是，现在插件已经不会自动绑定scroll事件了，也就是说，数字跳动触发是需要自己手动的，这也方便我们自定义了，不会被预定义的方法搞得手忙脚乱 。

countUp.start();   // 启动

countUp.start(callback);   // 支持回调函数

function callback(){ //回调函数 }

countUp.pauseResume();  // 暂停或恢复  如果在运行状态触发该方法则暂定，暂定状态再触发则恢复

countUp.reset();  // 重置  动画重新开始

countUp.update(989);  // 更新最新值；使用该方法，我们可以做到及时响应，比如对也米娜的访问次数、用户浏览量增加，都可以做到不刷新页面进行更新实时内容。
 

内容借鉴于：数字跳动特效-countUp插件用法 - 木灵鱼儿 (mulingyuer.com)