CountUp.js是一个无依赖、轻量级的JavaScript类，可以快速创建动画，以更有趣的方式展示数值数据。

尽管名字是CountUp，但它可以根据传递的起始和结束值实现向任意方向计数。

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

尝试演示

或者在Stackblitz上玩转CountUp

特性：

• 视窗滚动时动画化：使用选项enableScrollSpy。
• 高度可定制：带有大量选项，甚至可以替换数字字符。
• 智能缓动：CountUp会在接近结束值时智能地延迟缓动，以便视觉效果明显。可在选项中配置。
• 插件：允许替代动画，如Odometr插件

使用方法：

使用CountUp：

• Angular 2+
• Angular 1.x
• React
• Svelte
• Vue
• WordPress
• jQuery

直接使用CountUp：

在npm上作为countup.js可用。您可以导入为模块，或包含UMD脚本并全局访问CountUp。请查看详细的包含说明。

参数：

• target: string | HTMLElement | HTMLInputElement - 计数发生的HTML元素ID、输入元素、SVG文本元素或DOM元素引用
• endVal: number - 您希望达到的值
• options?: CountUpOptions - 可选配置对象，用于精细化控制

选项（默认值括号内）：

interface CountUpOptions {
  startVal?: number; // 起始数（0）
  decimalPlaces?: number; // 小数位数（0）
  duration?: number; // 动画持续时间（秒）（2）
  useGrouping?: boolean; // 示例：1,000 vs 1000 （真）
  useIndianSeparators?: boolean; // 示例：1,00,000 vs 100,000 （假）
  useEasing?: boolean; // 使用缓动（真）
  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 });
// 或者（传递给start的方法会覆盖options.onCompleteCallback）
countUp.start(someMethod);
// 或者
countUp.start(() => console.log('Complete!'));

其他方法：

暂停/恢复：

countUp.pauseResume();

重置动画：

countUp.reset();

更新结束值并动画化：

countUp.update(989);

当元素滚动到视图中时动画化

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

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

解决滚动监听问题

CountUp在初始化时就会检查滚动位置。所以如果在DOM渲染之前初始化它，并且目标元素在任何滚动之前已经处于视图中，您需要在页面渲染后重新检查滚动位置：

// 在DOM已渲染后
countUp.handleScroll();

使用插件进行替代动画

目前只有一个插件，即**Odometer插件**。

要使用插件，首先需要安装插件包。然后包括它并使用插件选项。有关更多详细信息，请参阅每个插件的文档。

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

如果您想要制作自己的插件，请查看下面的文档！

包含CountUp

CountUp作为ES6模块发布，因为它是最标准化且最兼容大多数浏览器的模块，尽管也提供UMD模块，以及单独的requestAnimationFrame补丁（见下文）。

对于以下示例，首先安装CountUp。这将获取最新版本：

npm i countup.js

原生JavaScript示例

这是我在演示中使用的。请查看index.html和demo.js。

main.js：

import { CountUp } from './js/countUp.min.js';
window.onload = function() {
  var countUp = new CountUp('target', 2000);
  countUp.start();
}

将其包含在HTML中。注意type属性：

<script src="./main.js" type="module"></script>

为了支持IE和其他旧版浏览器，使用nomodule脚本标签包含不使用模块语法的单独脚本：

<script nomodule src="js/countUp.umd.js"></script>
<script nomodule src="js/main-for-legacy.js"></script>

要在本地运行启用模块的脚本，您需要一个简单的本地服务器设置，例如this（通过运行npm run serve本地测试演示），因为否则浏览器尝试加载模块脚本时可能会出现CORS错误。

针对 Webpack 和其他构建系统

从包中导入，而不是文件位置：

import { CountUp } from 'countup.js';

UMD 模块

CountUp 还以 UMD 模块的形式封装在 ./dist/countUp.umd.js 中，并在全局作用域的 window 上暴露 CountUp 变量。要使用它，请通过脚本标签引入 countUp.umd.js，然后像这样调用：

var numAnim = new countUp.CountUp('myTarget', 2000);
numAnim.start();

requestAnimationFrame 兼容处理

如果你想支持 IE9 及更早版本以及 Opera Mini，可以包含 dist/requestAnimationFrame.polyfill.js。

转自https://gitcode.com/gh_mirrors/co/countUp.js