数字的无限累加动画——window.requestAnimationFrame实现

2023-12-11 22:54:25

数字累加动画：利用 window.requestAnimationFrame 的终极指南

在网页设计中，数字累加动画是一种常见的元素，它可以流畅地将数字从一个值平滑过渡到另一个值。这种动画在各种场景中都有应用，例如进度条、倒计时器或统计数据可视化。

实现数字累加动画的方法有很多，其中最流行的方法之一就是利用 window.requestAnimationFrame。在这个博客中，我们将深入探讨 window.requestAnimationFrame 的工作原理，并通过代码示例展示如何在你的项目中实现数字累加动画。

window.requestAnimationFrame 的原理

window.requestAnimationFrame 是一个 JavaScript 函数，它允许你以每秒 60 次的频率调用回调函数。这意味着当浏览器处于活动状态时，回调函数会不断以 60fps（帧/秒）的速率被调用。

这种机制使得 window.requestAnimationFrame 非常适合实现流畅的动画，因为它的调用频率足够高，可以创建平滑的视觉过渡，而不会出现卡顿或跳帧的情况。

应用 window.requestAnimationFrame 实现数字累加动画

利用 window.requestAnimationFrame 实现数字累加动画很简单。让我们一步步分解这个过程：

创建 HTML5 canvas 元素： 在你的 HTML 文档中，创建一个 canvas 元素，它将作为动画的容器。
获取 canvas 上下文： 使用 getContext('2d') 方法获取 canvas 的绘图上下文。
定义初始变量： 定义数字的初始值（例如 0）和累加速度（例如 1）。
编写动画循环函数： 这是一个不断调用的函数，负责更新动画并绘制 canvas。
在动画循环中：
- 清除 canvas 以防止重影。
- 根据当前值和累加速度绘制数字。
- 使用 window.requestAnimationFrame 递归调用动画循环函数。
启动动画： 调用动画循环函数以开始动画。

结束动画

在某些情况下，你可能需要结束动画。你可以使用 window.cancelAnimationFrame() 函数来实现。例如，当页面处于非活动状态时，你可以停止动画以节省资源。

代码示例

以下是一个使用 window.requestAnimationFrame 实现数字累加动画的代码示例：

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var number = 0;
    var speed = 1;

    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.font = '30px Arial';
      ctx.fillText(number, 10, 50);

      number += speed;

      requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>
</html>