使⽤JS实现数值动态变化动画效果
更多⽂章可关注我的个⼈博客：
本⽂主要回顾整理⼀下之前（⼤概⼀年前， ，这⼀年实在⽐较忙 ）写的⼀个页⾯动画。
之前其实写了两种⽅案，最终使⽤的如下的⽅案：
不过本篇⽂章会将两种⽅案都整理出来，⽅便⽇后有同样的需求时可以快速复⽤，同时也可以给正在实现这个需求的同学们⼀些参考！
话不多说，开整！
⼀、滚动式变化
这⼀种的呈现⽅式也是我在项⽬中最终应⽤的⽅式，个⼈觉得更好看⼀点
1.关于实现原理
其实想要实现这种滚动式数值变化原理⾮常简单，就是利⽤元素的位移，通常如果⽤css来实现元素的位移动画的话，我们很容易就会想
到animation属性。那我们基本上思路就有了：
将数值拆分
拆分后的每⼀块都是单独的⼀个模块，包含数字0~9，只展⽰当前位应该展⽰的值，其他的值隐藏
变化数值时，根据每⼀位的变化，通过js再去动态移动数字，从⽽实现数字滚动变化的效果
⼤体思路如上，但实际操作过程中，还会有很多细节需要考虑到，⽐如⼩数点的显⽰，是否显⽰千分位符号，数字累计增长计算细节等，接下来就具体来看看如何实现。
2.具体实现
⾸先，我们html部分只需要⼀个box来承载显⽰结果即可，细节部分我们下⾯通过JS来添加
// html 部分
<div id="valScrollAmt" class="valScrollAmt-box"></div>
这⾥的 id ⽤于js中的标识，⽽ class 则⽤于样式的编辑。我们这⾥命名⼀个id：valScrollAmt，下⾯会使⽤到。
接下来，我们假设初始值为 0，⾸先将其转换成数组。
说明：⽂中的代码主要是⽅便分解步骤讲解的写法，实际应⽤中，为了代码优雅性，可进⾏封装。不想看分解的同学也可以直接看完整⽰例代码
也可以去到我的github查看源码
直接看效果页⾯
const startNum = 0
//将number转换成string，从⽽计算长度，如果需要展⽰千分位符号的，也可以转换后（转换后即为字符串）直接计算长度
const numStr = (startNum + '').length;
let numArr = []
for(var i = 0;i<numStr.length;i++){
numArr.push(numStr.charAt(i));
}
转换成数组后，接下来就是⽣成dom，并将其插⼊最外层的容器中
<!--封装⼀个将数组转换成dom的函数-->
function amtDom(arr){
var str = '';
for(var i = 0;i<arr.length;i++){
if(parseInt(arr[i])>=0){
// 这⾥的`scrollItem`是每⼀位的dom标识，后⾯也会⽤到
// `digit-container`就是⽤来增加样式的
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;
}
// 为了简化操作，本⽂⽰例使⽤了jquery语法，使⽤的时候记得引⼊jquery
// 这⾥的id就是前⾯定义的唯⼀标识，注意对应
$("#valScrollAmt").html(amtDom(numArr));
jquery翻书效果
不过此时因为我们还没有增加样式，出来的界⾯还看不出效果，且有⼀丢丢丑
下⾯我们就增加⼀些样式，这⼀步不仅仅是美化，⽽是必要的，这种实现⽅式对dom的排版是有固定要求的
//css
.valScrollAmt-box{
display: flex;
height: 28px;
overflow: hidden;
font-size: 20px;
font-weight: bold;
}
.digit-container{
display: flex;
flex-direction: column;
line-height: 28px;
}
以上是满⾜需求的⼀些基本样式属性
⾸先要保证数字的每⼀位是横向排列，另外每⼀位上的0~9必须纵向展⽰，并且只需展⽰当前的数值，其余的数值隐藏显⽰。
这⾥的⾼度也很重要，最外层盒⼦的⾼度最好要跟内部每⼀位数字的盒⼦的⾼度保持⼀致，另外这边的⾼度也是js⾥计算滚动长度的依据。增加完样式的样⼦就是下⾯这样啦
最后就是让他动起来了
//⾸先要定好差值为1的位移⾼度
let height = $("#valScrollAmt").height();
// 这⾥需要注意的是，如果你是需要累计持续增长那么就需要将每次的变化前的数值数组缓存下来
/
/ 每次滚动的时候就在旧数值的基础上计算滚动⾼度
// 可以定义⼀个变量如下
let savePositionArr = []
// 然后遍历所有的位数的dom
$(".scrollItem").each(function(i){
let scrollTopOld,scrollTopNew;
let num = parseInt($(this).data("show"));
scrollTopNew = height * num;
if(!savePositionArr[i]){
savePositionArr[i] = 0
}
scrollTopOld = savePositionArr[i]
$(this).css("margin-top",-scrollTopOld);
if(scrollTopOld != scrollTopNew){
$(this).animate({marginTop: -scrollTopNew},1500);
}
savePositionArr[i] = scrollTopNew // 变化后及时将值替换存起来
});
最终应⽤的时候可以定义⼀个定时函数，控制变化的频率，每次变化的数值也可以根据实际情况设置
最终效果就是这样啦：
还有⼀个带⼩数点和千分位的效果：
是不是很简单！
⼆、动态变化
这种⽅法⽐较简单，就不做详细分解了
，直接上代码：
// 将数字转换为逗号隔开的千分位格式
function num2qfw(num){
num += '';
if (!num.includes('.')) num += '.';
place(/(\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() {
<(num2qfw(unt)));
},
complete: function () {
<(num2qfw(parseInt(value)));
}
});
};
let oldVal = 9374401
function update() {
magic_number(oldVal);
oldVal += Math.random()*100
}
update()
setInterval(update, 3000); //3秒钟执⾏⼀次 update();
效果如下：
欢迎关注的我的个⼈【搴芳拾梦】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。