countUp.js

摘要: 是一个相互间无依赖的,轻量级的JavaScript“类”,可以用来快速创建动画显示数值数据以一种更有趣的方式。
尽管它的名字,CountUp可以在两个方向数,根据startVal和endValparams通过。

countUp.js

简介

是一个相互间无依赖的,轻量级的JavaScript“类”,可以用来快速创建动画显示数值数据以一种更有趣的方式。
尽管它的名字,CountUp可以在两个方向数,根据startVal和endValparams通过。

兼容

CountUp.js支持所有浏览器。

参数配置：

target = 目标元素的 ID；
startVal = 开始值；
endVal = 结束值；
decimals = 小数位数，默认值是0；
duration = 动画延迟秒数，默认值是2；
options = 演示格式化选项对象

其他方法：

切换暂停/恢复：

numanim.pauseresume();

重设动画：

numAnim.reset();

更新值和在结束动画:

var someValue = 1337;
numAnim.update(someValue);

数值大的动画：

对于大的数字，自正数还有很长的路要走，仅仅几秒钟，动画似乎突然停止。将溶液从100减去你的endVal然后，使用callback来调用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>

可选的回调：

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

宽松的自定义：

您可以任选你适用宽松自定义功能，需要接收4个参数来

计算贝塞尔(Bezier)曲线：

t(当前时间)；

b(初期值)；

c(之间的差和目标值)；

d(总时间)的吐温。

你可以使用任何的罗伯特的Penner宽松政策功能。避免提到“弹动”功能，因为它们引起在两个方向计数
如果你不指定自定义的缓和功能，累计使用默认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();