JavaScript 数字滚动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 < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall) }, timeToCall); lastTime = currTime + timeToCall; return id } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id) } } function formatNumber(num) { num = num.toFixed(self.decimals); num += ""; var x, x1, x2, x3, i, l; x = num.split("."); x1 = x[0]; x2 = x.length > 1 ? self.options.decimal + x[1] : ""; if (self.options.useGrouping) { x3 = ""; for (i = 0, l = x1.length; i < l; ++i) { if (i !== 0 && ((i % 3) === 0)) { x3 = self.options.separator + x3 } x3 = x1[l - i - 1] + x3 } x1 = x3 } if (self.options.numerals.length) { x1 = x1.replace(/[0-9]/g, function(w) { return self.options.numerals[ + w] }); x2 = x2.replace(/[0-9]/g, function(w) { return self.options.numerals[ + w] }) } return self.options.prefix + x1 + x2 + self.options.suffix } function easeOutExpo(t, b, c, d) { return c * ( - Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b } function ensureNumber(n) { return (typeof n === "number" && !isNaN(n)) } self.initialize = function() { if (self.initialized) { return true } self.error = ""; self.d = (typeof target === "string") ? document.getElementById(target) : target; if (!self.d) { self.error = "[CountUp] target is null or undefined"; return false } self.startVal = Number(startVal); self.endVal = Number(endVal); if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) { self.decimals = Math.max(0, decimals || 0); self.dec = Math.pow(10, self.decimals); self.duration = Number(duration) * 1000 || 2000; self.countDown = (self.startVal > 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 } else { 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.duration) { self.rAF = requestAnimationFrame(self.count) } else { if (self.callback) { self.callback() } } }; self.start = function(callback) { if (!self.initialize()) { return } self.callback = callback; self.rAF = requestAnimationFrame(self.count) }; self.pauseResume = function() { if (!self.paused) { self.paused = true; cancelAnimationFrame(self.rAF) } else { self.paused = false; delete self.startTime; self.duration = self.remaining; self.startVal = self.frameVal; requestAnimationFrame(self.count) } }; self.reset = function() { self.paused = false; delete self.startTime; self.initialized = false; if (self.initialize()) { cancelAnimationFrame(self.rAF); self.printValue(self.startVal) } }; self.update = function(newEndVal) { if (!self.initialize()) { return } newEndVal = Number(newEndVal); if (!ensureNumber(newEndVal)) { self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal; return } self.error = ""; if (newEndVal === self.frameVal) { return } cancelAnimationFrame(self.rAF); self.paused = false; delete self.startTime; self.startVal = self.frameVal; self.endVal = newEndVal; self.countDown = (self.startVal > self.endVal); self.rAF = requestAnimationFrame(self.count) }; if (self.initialize()) { self.printValue(self.startVal) } };
2.1 代码示例
<!-- 数字滚动 --> <template> <div id="numScroll" style="width: 200px;height: 200px;font-size: 30px;font-weight: bold;"></div> </template> <script> import CountUp from "countup" export default { name: "numberScroll.vue", mounted() { this.numberScroll() }, methods: { numberScroll() { let count = new CountUp("numScroll", 0, 56565, 0, 5, {duration: 5, useEasing: false}) if (!count.error) { count.start() } else { console.log(count.error) } } } } </script>
