countup.js---数字动画展示,轻量级的js类,不依赖任何第三方库

counup.js 示例地址:http://inorganik.github.io/countUp.js
countup.js下载地址:https://github.com/inorganik/countUp.js 或者 通过npm install countup.js下载包

countup.js支持所有浏览器。
能快速的创建各种有趣的数值动画效果,定义动画持续时间,设置是否启动、停止、重置。

如何使用counup.js?

demo:

var options = {
  useEasing: true,
  useGrouping: true,
  separator: ',',
  decimal: '.',
};
var numAnim = new CountUp('myTargetElement', 0, 4036, 0, 2.5, options);
if (!numAnim.error) {
  numAnim.start();
} else {
  console.error(numAnim.error);
}

参数配置:

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

options配置

useEasing: true,   //是否使用动画曲线
useGrouping: true,  //数字是否用separator隔开
separator: ',',   //数字用逗号隔开
decimal: '.',    //小数点符号
Prefix:'¥',    //添加前缀
Suffix:'元'     //添加后缀

其他方法:

numAnmi.start();//开启动画
numAnmi.pauseResume();//自动判断当前状态。如果当前状态是是暂停会恢复动画,如果当前状态是动画会自动暂停
numAnmi.reset() ;//当前value变成
numAnmi.update(6789);//改变endVlaue,并开启动画

数值大的动画:
对于大的数字,自正数还有很长的路要走,仅仅几秒钟,动画似乎突然停止。将endVal减去100,然后,使用callback来调用update这完成了方法与动画相同,只相差100动画

var endVal = 9645.72;
var numAnim = new CountUp("targetElem", 0, endVal - 100, duration/2);
numAnim.start(function() {
  numAnim.update(endVal);
});

你可能感兴趣的:(countup.js---数字动画展示,轻量级的js类,不依赖任何第三方库)