在数据可视化大屏项目开发中，会需要各种动画装饰，数字滚动效果便是其中之一，今天介绍的是CountUp.js滚动插件

动态效果

CountUp.js是一个无依赖、轻量级的JavaScript类，可用于快速创建显示数字数据的动画，使数字数据的展示更加有趣和动态。尽管其名称为CountUp，但根据传入的开始值和结束值，它可以向任何方向计数。

CountUp.js支持所有浏览器，并采用MIT许可证。

尝试演示或在Stackblitz中试用CountUp。

使用方法包括：

• 可以与Angular 2+、Angular 1.x、React、Svelte、Vue、WordPress和jQuery等一起使用。
• 直接使用CountUp.js：在npm上作为countup.js。可以作为模块导入，或包含UMD脚本并将CountUp作为全局访问。详细的包含方法见下文。

参数：

• target: string | HTMLElement | HTMLInputElement - 计数发生的html元素、输入、svg文本元素的id或DOM元素引用
• endVal: number - 你想要到达的值
• options?: CountUpOptions - 可选的配置对象，用于细粒度控制

选项（默认值在括号中）：

interface CountUpOptions {
  startVal?: number; // 开始值 (0)
  decimalPlaces?: number; // 小数位数 (0)
  duration?: number; // 动画持续时间，以秒为单位 (2)
  useGrouping?: boolean; // 例如：1,000 vs 1000 (true)
  useIndianSeparators?: boolean; // 例如：1,00,000 vs 100,000 (false)
  useEasing?: boolean; // 缓和动画 (true)
  smartEasingThreshold?: number; // 如果使用缓和，大数字的平滑缓和阈值 (999)
  smartEasingAmount?: number; // 超过阈值的数字的缓和量 (333)
  separator?: string; // 分组分隔符 (',')
  decimal?: string; // 小数点 ('.')
  // easingFn: 动画的缓和函数 (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // 此函数格式化结果
  prefix?: string; // 结果前的文本
  suffix?: string; // 结果后的文本
  numerals?: string[]; // 数字字形替换
  enableScrollSpy?: boolean; // 目标在视图中时开始动画
  scrollSpyDelay?: number; // 目标进入视图后的延迟（毫秒）
  scrollSpyOnce?: boolean; // 只运行一次
  onCompleteCallback?: () => any; // 动画完成时调用
  onStartCallback?: () => any; // 动画开始时调用
  plugin?: CountUpPlugin; // 用于替代动画
}

示例用法：

const countUp = new CountUp('targetId', 5234);
if (!countUp.error) {
  countUp.start();
} else {
  console.error(countUp.error);
}

传递选项：

const countUp = new CountUp('targetId', 5234, options);

带有可选完成回调的：

const countUp = new CountUp('targetId', 5234, { onCompleteCallback: someMethod });

其他方法：

• 切换暂停/恢复：countUp.pauseResume();
• 重置动画：countUp.reset();
• 更新结束值并动画：countUp.update(989);

使用滚动间谍选项在元素滚动到视图中时动画。使用滚动间谍时，只需初始化CountUp，但不要调用start()；

const countUp = new CountUp('targetId', 989, { enableScrollSpy: true });

目前只有一个插件，即Odometer插件。要使用插件，首先需要安装插件包。然后可以包含它并使用插件选项。有关更详细信息，请参阅每个插件的文档。

const countUp = new CountUp('targetId', 5234, {
  plugin: new Odometer({ duration: 2.3, lastDigitDelay: 0 }),
  duration: 3.0
});

搭配Odometer使用

import { CountUp } from "CountUp";

import { Odometer } from "Odometer";

const counter = new CountUp("counter", 99999, {
  plugin: new Odometer({ duration: 2.3, delay: 0 }),
  duration: 3.0
});
counter.start();