countupjs，一个有趣的数字翻滚动画

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

用法

参数:

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

• Options :{}//对象格式

  useEasing: true, // toggle easing
  useGrouping: true, // 1,000,000 vs 1000000
  separator: ',', // character to use as a separator
  decimal: '.', // character to use as a decimal
  easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
  formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
  prefix: '', // optional text before the result
  suffix: '', // optional text after the result
  numerals: [] // optionally pass an array of custom numerals for 0-9

  
  

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

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