使用JS实现数值动态变化动画效果

2024-01-28 15:10

本文主要是介绍使用JS实现数值动态变化动画效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

更多文章可关注我的个人博客:https://seven777777.github.io/myblog/

本文主要回顾整理一下之前(大概一年前,😂,这一年实在比较忙 )写的一个页面动画。

之前其实写了两种方案,最终使用的如下的方案:

不过本篇文章会将两种方案都整理出来,方便日后有同样的需求时可以快速复用,同时也可以给正在实现这个需求的同学们一些参考!

话不多说,开整!

一、滚动式变化

这一种的呈现方式也是我在项目中最终应用的方式,个人觉得更好看一点 😄

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));

不过此时因为我们还没有增加样式,出来的界面还看不出效果,且有一丢丢丑

下面我们就增加一些样式,这一步不仅仅是美化,而是必要的,这种实现方式对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 += '.';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();

效果如下:

搴芳拾梦
欢迎关注的我的个人公众号【搴芳拾梦】

这篇关于使用JS实现数值动态变化动画效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/654007

相关文章

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Ubuntu如何分配​​未使用的空间

《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu