前端开发攻略---用JavaScript打造炫酷数字变化动画效果：手写实现你的自定义动画函数！支持更改任意数字、动画速度

bbamx.

已于 2024-04-11 13:30:59 修改

阅读量731

点赞数 9

分类专栏：前端开发攻略文章标签： javascript 开发语言 ecmascript

于 2024-04-09 11:44:45 首次发布

本文链接：https://blog.csdn.net/nibabaoo/article/details/137545272

版权

前端开发攻略专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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>

bbamx.

关注

9
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发攻略---用JavaScript打造炫酷数字变化动画效果：手写实现你的自定义动画函数！支持更改任意数字、动画速度

向您展示如何使用JavaScript来创建一个自定义的动画函数，以实现数字变化效果。我们将深入了解前端动画的本质，并通过手写代码来实现这个炫酷的数字变化动画效果
复制链接

扫一扫