效果
案例一：上下滚动
案例二：本身变化
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>数字滚动变化动画</title></head><style>*{margin:0;padding: 0;}/* 滚动变化相关 */.valScrollAmt-box {display: flex;height: 50px;overflow: hidden;font-size: 50px;font-weight: bold;line-height:50px;margin: 10px 10px;}.digit-container {display: flex;flex-direction: column;line-height: 50px;}/* 动态变化 */.valChangeAmt-box {font-size: 50px;font-weight: bold;line-height: 50px;margin: 10px 10px;}.div1 {background-color: aqua;padding: 5px 5px;}.div2 {background-color: bisque;padding: 5px 5px;}h1{font-size: 50px;margin: 10px 10px;}</style><body><div class="div1"><h1>案例1:滚动式变化</h1><div id="valScrollAmt" class="valScrollAmt-box"></div></div><div class="div2"><h1>案例2:动态变化</h1><div id="valChangeAmt" class="valChangeAmt-box">0</div></div></body><script src="jquery-3.5.1.min.js"></script><script>// 滚动式变化class animateObj {constructor(id, startNum, step, time) {this.id = id; //容器唯一标识this.startNum = startNum; // 初始数值this.savePositionArr = []; //存放旧数据的位置数组}// 数字转成数组number2Arr(digit) {var num_arr = [];for (var i = 0; i < digit.length; i++) {num_arr.push(digit.charAt(i));}return num_arr;}// dom构建amtDom(arr) {var str = "";for (var i = 0; i < arr.length; i++) {if (parseInt(arr[i]) >= 0) {str +='<div class="scrollItem digit-container" data-show=' +arr[i] +">\<span>0</span>\<span>1</span>\<span>2</span>\<span>3</span>\<span>4</span>\<span>5</span>\<span>6</span>\<span>7</span>\<span>8</span>\<span>9</span>\</div>";} else {str += '<div class="sign-box"><span>' + arr[i] + "</span></div>";}}return str;}// 将数字转换为逗号隔开的千分位格式num2qfw(num) {num += "";if (!num.includes(".")) num += ".";return num.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {return $1 + ",";}).replace(/\.$/, "");}animation() {const _this = this;var height = $("#" + this.id).height();$(".scrollItem").each(function (i) {let scrollTopOld, scrollTopNew;let num = parseInt($(this).data("show"));scrollTopNew = height * num;if (!_this.savePositionArr[i]) {_this.savePositionArr[i] = 0;}scrollTopOld = _this.savePositionArr[i];$(this).css("margin-top", -scrollTopOld);if (scrollTopOld != scrollTopNew) {$(this).animate({ marginTop: -scrollTopNew }, 1500);}_this.savePositionArr[i] = scrollTopNew;});}init() {const _sNum = this.num2qfw(this.startNum);const numArr = this.number2Arr(_sNum);$("#" + this.id).html(this.amtDom(numArr));this.animation();}}let animate = new animateObj("valScrollAmt", 1235.8);animate.init();setInterval(function () {animate.startNum += 3;animate.init();}, 4000);// 动态变化// 将数字转换为逗号隔开的千分位格式function num2qfw(num) {num += "";if (!num.includes(".")) num += ".";return num.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {return $1 + ",";}).replace(/\.$/, "");}// 数值改变动画函数function magic_number(value) {var num = $("#valChangeAmt");num.animate({ count: value },{duration: 500,step: function () {num.text(num2qfw(parseInt(this.count)));},complete: function () {num.text(num2qfw(parseInt(value)));},});}let oldVal = 9374401;function update() {magic_number(oldVal);oldVal += Math.random() * 100;}update();setInterval(update, 3000); //3秒钟执行一次 update();</script>
</html>
![[Unity] Tilemap瓦片左右翻转（上下翻转）](https://img-blog.csdnimg.cn/direct/6472b7c150c747f198f4e1995e370223.png)
