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