CountUp.js

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

尽管名为CountUp，但根据您传入的起始和结束值，它可以向上或向下计数。

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

试用演示

或在Stackblitz中调试CountUp

快速导航:

• 使用方法
• 引入CountUp
• 贡献
• 创建动画插件

特性

• 元素滚动到视图时触发动画。 使用选项enableScrollSpy。
• 高度可定制，提供大量选项，甚至可以替换数字。
• 智能缓动: CountUp会智能延迟缓动，直到接近结束值时才开始视觉上明显的缓动。可在选项中配置。
• 插件允许使用替代动画，如Odometer插件

使用方法:

使用CountUp的方式:

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

直接使用CountUp:

在npm上作为countup.js提供。您可以将其作为模块导入，或包含UMD脚本并将CountUp作为全局变量访问。有关引入CountUp的详细说明，请参阅详细说明。

参数:

• target: string | HTMLElement | HTMLInputElement - HTML元素的id、input、svg文本元素或DOM元素引用，用于显示计数
• endVal: number - 您想要达到的值
• options?: CountUpOptions - 可选的配置对象，用于精细控制

选项 (括号中为默认值): <a name="options"></a>

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; // 用于替代动画
}

使用示例: <a name="example"></a>

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('完成!'));

其他方法:

切换暂停/恢复:

countUp.pauseResume();

重置动画:

countUp.reset();

更新结束值并动画:

countUp.update(989);

---

元素滚动到视图时触发动画

使用滚动监听选项在元素滚动到视图时触发动画。使用滚动监听时，只需初始化CountUp，无需调用start()方法。

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

滚动监听故障排除

CountUp会在初始化后立即检查滚动位置。因此，如果在DOM渲染之前初始化它，并且目标元素在滚动之前就已经在视图中，则需要在页面渲染后重新检查滚动位置:

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

---

使用插件的替代动画

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

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

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

如果您想创建自己的插件，请参阅下面的文档！

---

引入CountUp

CountUp作为ES6模块分发，因为它是最标准化和最广泛兼容的浏览器模块，尽管也包含了UMD模块，以及一个单独的requestAnimationFrame polyfill（见下文）。

对于以下示例，首先安装CountUp。这将给您最新版本:

npm i countup.js

原生js示例

这是我在演示中使用的方法。查看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>

要在本地运行支持模块的脚本，您需要一个简单的本地服务器设置，如这个（通过运行npm run serve在本地测试演示），否则当浏览器尝试将脚本作为模块加载时，您可能会看到CORS错误。

对于Webpack和其他构建系统

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

import { CountUp } from 'countup.js';

UMD模块

CountUp也被包装为./dist/countUp.umd.js中的UMD模块，它在window作用域上暴露CountUp作为全局变量。要使用它，在script标签中包含countUp.umd.js，并像这样调用它:

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

requestAnimationFrame polyfill

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

---

贡献

在提交拉取请求之前，请务必遵循以下说明:

1. 在src/countUp.ts上进行工作
2. 运行lint: npm run lint
3. 运行测试: npm t
4. 通过运行npm start构建并提供演示，然后检查演示以确保它正在计数。

---

创建动画插件

从v2.6.0开始，CountUp支持插件。插件实现自己的render方法来显示每帧的格式化值。可以将类实例或对象传递给CountUpOptions的plugin属性，插件的render方法将被调用，而不是CountUp的。

export declare interface CountUpPlugin {
  render(elem: HTMLElement, formatted: string): void;
}

插件示例:

export class SomePlugin implements CountUpPlugin {
  // ...这里是一些属性

  constructor(options: SomePluginOptions) {
    // ...如果需要的话，这里是设置代码
  }

  render(elem: HTMLElement, formatted: string): void {
    // 在这里渲染DOM
  }
}

如果您创建了插件，请务必创建PR以将其添加到此README中！