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>