countUp.js实现数字滚动效果

本文实例为大家分享了countUp.js数字滚动效果展示的具体代码，供大家参考，具体内容如下

1. 概述

1.1 说明

在项目过程中，有时候需要动态的去展示一些数据的加载状态，如一个数字为10000，需要5秒时间滚动加载完成。此时使用countup.js就能够很方便的处理此类功能问题。

1.2 countup.js

countup.js是一个无依赖性、轻量级的Javascript类，可用于快速创建动画，以更有趣的方式显示数字/数据。详见countup.js

1.3 countup.js使用

npm install countup  进行安装依赖

import CountUp from "countup"  在页面中引入

new CountUp(target, startVal, endVal, decimals, duration, options)

参数：

• target: 目标元素的id  *必填
• startVal：开始的值(从哪个值开始)  *必填
• endVal：结束的值(滚动到哪个值结束)  *必填
• decimals：小数位数，默认值为0  *可选
• duration：动画持续时间，单位为秒，默认值为2  *可选
• options：选项的可选对象  *可选

                     useEasing:true  --是否使用缓动动画，默认为缓动，可设置为false让其匀速

                     useGrouping:true --对数字进行分组，如12345，按三位一组变为类似12,345这样的

                     separator: ','  --分组时使用的分隔符默认是逗号

                      decimal: '.'  --小数点

                      prefix: ''  --添加前缀如12345，变为￥12345

                      suffix: ''  --添加后缀如12345 通过添加后缀变为12345$，12345元之类的

方法：

暂停/恢复      pauseResume
重置动画       reset
更新值           update(newVal)

2. 代码

2.1 源代码

var CountUp = function(target, startVal, endVal, decimals, duration, options) {
 var self = this;
 self.version = function() {
 return "1.9.2"
 };
 self.optiOns= {
 useEasing: true,
 useGrouping: true,
 separator: ",",
 decimal: ".",
 easingFn: easeOutExpo,
 formattingFn: formatNumber,
 prefix: "",
 suffix: "",
 numerals: []
 };
 if (options && typeof optiOns=== "object") {
 for (var key in self.options) {
  if (options.hasOwnProperty(key) && options[key] !== null) {
  self.options[key] = options[key]
  }
 }
 }
 if (self.options.separator === "") {
 self.options.useGrouping = false
 } else {
 self.options.separator = "" + self.options.separator
 }
 var lastTime = 0;
 var vendors = ["webkit", "moz", "ms", "o"];
 for (var x = 0; x  1 ? self.options.decimal + x[1] : "";
 if (self.options.useGrouping) {
  x3 = "";
  for (i = 0, l = x1.length; i  self.endVal);
  self.frameVal = self.startVal;
  self.initialized = true;
  return true
 } else {
  self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
  return false
 }
 };
 self.printValue = function(value) {
 var result = self.options.formattingFn(value);
 if (self.d.tagName === "INPUT") {
  this.d.value = result
 } else {
  if (self.d.tagName === "text" || self.d.tagName === "tspan") {
  this.d.textCOntent= result
  } else {
  this.d.innerHTML = result
  }
 }
 };
 self.count = function(timestamp) {
 if (!self.startTime) {
  self.startTime = timestamp
 }
 self.timestamp = timestamp;
 var progress = timestamp - self.startTime;
 self.remaining = self.duration - progress;
 if (self.options.useEasing) {
  if (self.countDown) {
  self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration)
  } else {
  self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration)
  }
 } else {
  if (self.countDown) {
  self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration))
  } else {
  self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration)
  }
 }
 if (self.countDown) {
  self.frameVal = (self.frameVal  self.endVal) ? self.endVal: self.frameVal
 }
 self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
 self.printValue(self.frameVal);
 if (progress  self.endVal);
 self.rAF = requestAnimationFrame(self.count)
 };
 if (self.initialize()) {
 self.printValue(self.startVal)
 }
};

2.1 代码示例