1、演示
2、介绍
这篇文章将向您展示如何使用JavaScript来创建一个自定义的动画函数，以实现数字变化效果。我们将深入了解前端动画的本质，并通过手写代码来实现这个炫酷的数字变化动画效果。您将学到如何利用JavaScript来操作DOM元素，控制动画的过程和效果，以及如何提升用户体验和网页交互性。无论您是初学者还是有经验的开发者，本文都将为您提供有益的知识和实用的技巧，让您能够轻松创建令人惊艳的前端动画效果。
3、动画的本质
前端动画的本质在于通过在网页上操作元素的样式和属性，以创建视觉上的变化和动态效果。这些效果可以吸引用户的注意力，提升用户体验，以及增强网页的交互性。实现前端动画的方法通常包括使用CSS动画、JavaScript动画或者结合两者。CSS动画适用于简单的动画效果，而JavaScript动画则更加灵活，可以实现更复杂的动态效果，同时也能够通过手动控制动画的时间、速度和过渡效果来实现更精细的控制。无论是哪种方法，前端动画的本质都是通过在网页上操作元素的样式和属性，以创造出令人愉悦和吸引人的视觉效果。
说白了就是在一段时间里面，一个数字变换到另一个数字，本质就是数字的变化
4、requestAnimationFrame
当涉及到前端动画时，
requestAnimationFrame是一个非常重要的工具。它是一个专门为动画设计的 JavaScript 方法，能够在浏览器下一次重绘之前执行指定的函数，从而创建平滑流畅的动画效果。使用
requestAnimationFrame的基本用法是在动画循环中调用它。通常，您会在动画函数中递归调用requestAnimationFrame，以便在每一帧都更新动画状态并进行下一次重绘。这样可以确保动画在浏览器的渲染间隙中进行，避免了因为在间隙内的不必要渲染而引起的性能问题。下面是
requestAnimationFrame的基本用法示例：function animate() { // 更新动画状态 // 绘制动画 // 递归调用 requestAnimationFrame requestAnimationFrame(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 = from const start = Date.now() // 变化速度 const speed = (to - from) / duration // _run函数：让value一点一点变化 function _run() { // 1、改变value的值 const t = Date.now() - start if (t >= duration) { value = to onProgress(value) return } // 总值 = 起点值 + 变化时间 * 变化速度 value = from + t * speed onProgress(value) // 2、注册下一次的变化 requestAnimationFrame(_run) } // 一开始执行 _run() } </script> </html>
