用法

参数:

• target = 用于计数的 html 元素、input、svg 文本元素或 DOM 元素引用的 id
• startVal = 开始值
• endVal = 结束值
• decimals = （可选）数字中的小数位数，默认为0
• duration = （可选）动画持续时间（以秒为单位），默认为2
• options = （可选，请参阅demo）

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

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();