南昌企业网站建设公司百度客服电话24小时客服电话
1、演示
2、介绍
这篇文章将向您展示如何使用JavaScript来创建一个自定义的动画函数，以实现数字变化效果。我们将深入了解前端动画的本质，并通过手写代码来实现这个炫酷的数字变化动画效果。您将学到如何利用JavaScript来操作DOM元素，控制动画的过程和效果，以及如何提升用户体验和网页交互性。无论您是初学者还是有经验的开发者，本文都将为您提供有益的知识和实用的技巧，让您能够轻松创建令人惊艳的前端动画效果。
3、动画的本质
前端动画的本质在于通过在网页上操作元素的样式和属性，以创建视觉上的变化和动态效果。这些效果可以吸引用户的注意力，提升用户体验，以及增强网页的交互性。实现前端动画的方法通常包括使用CSS动画、JavaScript动画或者结合两者。CSS动画适用于简单的动画效果，而JavaScript动画则更加灵活，可以实现更复杂的动态效果，同时也能够通过手动控制动画的时间、速度和过渡效果来实现更精细的控制。无论是哪种方法，前端动画的本质都是通过在网页上操作元素的样式和属性，以创造出令人愉悦和吸引人的视觉效果。
说白了就是在一段时间里面，一个数字变换到另一个数字，本质就是数字的变化
4、requestAnimationFrame
当涉及到前端动画时，
requestAnimationFrame是一个非常重要的工具。它是一个专门为动画设计的 JavaScript 方法，能够在浏览器下一次重绘之前执行指定的函数，从而创建平滑流畅的动画效果。使用
requestAnimationFrame的基本用法是在动画循环中调用它。通常，您会在动画函数中递归调用requestAnimationFrame，以便在每一帧都更新动画状态并进行下一次重绘。这样可以确保动画在浏览器的渲染间隙中进行，避免了因为在间隙内的不必要渲染而引起的性能问题。下面是
requestAnimationFrame的基本用法示例：function animate() {// 更新动画状态// 绘制动画// 递归调用 requestAnimationFramerequestAnimationFrame(animate); }// 启动动画 animate();通过结合
requestAnimationFrame和其他 JavaScript 技术，您可以创建出令人印象深刻的交互式和动态的前端效果。
5、源码及注释（您只需要copy然后改成你想要的样子就行了）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>button {padding: 5px 10px;}</style></head><body><button>打折</button><span>价格：</span><span class="price">40000</span></body><script>const btn = document.querySelector('button')const label = document.querySelector('.price')// 1、点击按钮的时候将一个数字变换为另一个数字btn.addEventListener('click', function () {// 封装一个 animation函数// 参数表示的意思：动画的时间 起始数字 结束数字 回调函数animation(5000, 40000, 40, val => {console.log(val)label.textContent = val.toFixed(2)})})function animation(duration, from, to, onProgress) {let value = fromconst start = Date.now()// 变化速度const speed = (to - from) / duration// _run函数：让value一点一点变化function _run() {// 1、改变value的值const t = Date.now() - startif (t >= duration) {value = toonProgress(value)return}// 总值 = 起点值 + 变化时间 * 变化速度value = from + t * speedonProgress(value)// 2、注册下一次的变化requestAnimationFrame(_run)}// 一开始执行_run()}</script> </html>