蓝戒的博客


countUp.js实现有趣动画方式展示数字变化

关于countUp.js

countUp.js是一个轻量经的JavaScript类,不依赖任何第三方库。可用于以一种有趣的动画展示数字变化。

示例地址:http://inorganik.github.io/countUp.js/

项目主页:http://www.open-open.com/lib/view/home/1389595782555

尽管名字叫countUp,实际上它可以在任一方向上进行变化,这是根据startVal和endVal传递参数判断。

countup.js支持所有浏览器。

countup

参数配置:

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

本文固定链接: http://www.webzsky.com/?p=1016 | 蓝戒的博客

cywcd
该日志由 cywcd 于2016年11月01日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: countUp.js实现有趣动画方式展示数字变化 | 蓝戒的博客

countUp.js实现有趣动画方式展示数字变化:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×