CountUp.js 轻量级数字滚动动画特效插件

  • Z时代
  • 2024-01-10
  • 分类：IT

CountUp.js 是一种无依赖项的轻量级 JavaScript 类，可用于快速创建以更有趣的方式显示数字数据的动画。尽管它的名字，CountUp 可以在两个方向上进行计数，具体取决于您传递的开始和结束值。

CountUp.js 支持所有主流浏览器。基于 MIT 许可证发布。

CountUp.js 轻量级数字滚动动画特效插件

特征

  • 高度可定制：的选项范围很广，您甚至可以替换数字。

  • 智能缓动：CountUp 智能地将缓动延缓到足够接近最终值的程度，以使缓动在视觉上引人注意。可在选项中配置。

  • 带有和不带有 requestAnimationFrame 填充的现代和旧版浏览器的单独捆绑包。选择 countUp.min.js 用于现代浏览器或countUp.withPolyfill.min.js IE9及更早版本以及 Opera mini。

用法

在 npm 上：countup.js

参数：

  • target: string | HTMLElement | HTMLInputElement -发生计数的 html 元素，输入，svg 文本元素或 DOM 元素引用的ID

  • endVal: number – 您想要获得的价值

  • options?: CountUpOptions – 用于精细控制的可选配置对象

选项（括号内为默认值）：

interface CountUpOptions {
  startVal?: number; // number to start at (0)
  decimalPlaces?: number; // number of decimal places (0)
  duration?: number; // animation duration in seconds (2)
  useGrouping?: boolean; // example: 1,000 vs 1000 (true)
  useEasing?: boolean; // ease animation (true)
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // grouping separator (',')
  decimal?: string; // decimal ('.')
  // easingFn: easing function for animation (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // this function formats result
  prefix?: string; // text prepended to result
  suffix?: string; // text appended to result
  numerals?: string[]; // numeral glyph substitution
}

用法示例：

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

通过选项：

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

带有可选的回调：

countUp.start(someMethodToCallOnComplete);
// or an anonymous function
countUp.start(() => console.log('Complete!'));

其他方法：

切换暂停/恢复：

countUp.pauseResume();

重置动画：

countUp.reset();

更新最终值并设置动画：

countUp.update(989);

引入 CountUp

CountUp v2 作为 ES6 模块分发，因为它是针对浏览器的最标准化和最广泛兼容的模块，尽管还包括 UMD 模块。

对于以下示例，请首先安装 CountUp。这将为您提供最新信息：

npm i countup.js

Vanilla 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和旧版浏览器，请使用 nomodulescript 标记包括不使用模块语法的单独脚本：

<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还包装为UMD模块，./dist/countUp.umd.js并且在窗口范围内将CountUp公开为全局变量。要使用它，请将其包含countUp.umd.js在脚本标签中，然后像这样调用它：

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

相关链接

  • 官网示例：http://inorganik.github.io/countUp.js/

  • github 地址：https://github.com/inorganik/CountUp.js

以上是 CountUp.js 轻量级数字滚动动画特效插件 的全部内容， 来源链接： utcz.com/p/233340.html

回到顶部