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

用法

参数:
  • target = html元素的id,input,svg text元素,或者计数发生时先前选择的元素/输入的var
  • startVal = 你要开始的值
  • endVal = 你想要达到的价值
  • decimals = (可选)数字中的小数位数,默认为0
  • duration = (可选)持续时间(以秒为单位),默认为2
  • options = (可选,请参阅demo)格式化/easing选项对象

可以省略小数,持续时间和选项以使用默认值。

var numAnim = new CountUp("SomeElementYouWantToAnimate", 24.02, 99.99);
numAnim.start();

可选回调:

numAnim.start(someMethodToCallOnComplete);

// or an anonymous function
numAnim.start(function() {
    // do something
})

其他方法
切换暂停/恢复:

numAnim.pauseResume();

重置动画:

numAnim.reset();

更新结束值和动画:

var someValue = 1337;
numAnim.update(someValue);
大数字动画

对于较大的数字,由于 CountUp 有很长的路要走几秒钟,动画似乎突然停止。解决方案是从 endVal 中减去100,然后使用回调来调用 update 方法,该方法以相同的持续时间完成动画,差异仅为100,以生成动画:

var endVal = 9645.72;
var numAnim = new CountUp("targetElem", 0, endVal - 100, duration/2);
numAnim.start(function() {
    numAnim.update(endVal);
});
使用 Angular

如果你使用Angular(不是必需的),请按照以下示例创建动画。确保包含 countUp.js 和 angular-countUp.js ,并注入 countUpModule 。

<h2 count-up end-val="873.4"></h2>

使用 angular-scroll-spy:

<h2 count-up id="numberAnimation" end-val="873.4" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy></h2>
使用 Angular 2

该指令与 Angular 版本2.0.0兼容。

确保 countUp.js 在引导期间作为全局依赖关系加载。

请注意,options 参数的值直接传递到指令属性选择器。

import {Component, NgModule} from '@angular/core';

import {CountUpModule} from 'countup.js/dist/countUp.module';

@NgModule({
   imports: [CountUpModule],
   bootstrap: [AppComponent]
})
export class AppModule {}

// ...
// ...
// Use in some component contained within the importing module...

@Component({
   selector: 'counting-header',
   template: `
        

` }) export class CountingHeaderComponent { @Input() myStartVal: number; @Input() myEndVal: number; }
定制 easing 动画:

你可以选择应用自定义 easing 函数,它将接收计算贝塞尔曲线所需的4个参数:

  • t (当前时间);
  • b (开始值);
  • c (开始值和目标值之间的差值);
  • d (补间的总时间).

你可以使用任何Robert Penner的 easing 函数。只需要避免使用“弹性”功能,因为它们导致双向计数。

如果不指定自定义 easing 函数,CountUp 将使用默认的 easeOutExpo。

例如:

var easeOutCubic = function(t, b, c, d) {
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b + c * (1.77635683940025e-15 * tc * ts + 0.999999999999998 * tc + -3 * ts + 3 * t);
};
var options = {
  easingFn: easeOutCubic
};
var demo = new CountUp("myTargetElement", 24.02, 94.62, 2, 2.5, options);
demo.start();