countupjs，一个有趣的数字翻滚动画 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();

【countupjs，一个有趣的数字翻滚动画】可选回调：

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

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

numAnim.pauseResume();

重置动画：

numAnim.reset();

更新结束值和动画：

var someValue = https://www.it610.com/article/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 。

使用 angular-scroll-spy:

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