定时器-requestAnimationFrame-实现动画效果-前端-Javascript-书闪BookChips

158 - 定时器 - requestAnimationFrame - 实现动画效果

作者：

贺及楼

成为作者

更新日期：2025-02-21 20:12:23

定时器 - requestAnimationFrame - 实现动画效果

在前端开发中，实现动画效果是一项常见且重要的任务。JavaScript 为我们提供了多种实现动画的方式，其中 requestAnimationFrame 是一个强大且高效的工具。本文将深入探讨 requestAnimationFrame 的原理、优势以及如何使用它来实现动画效果。

传统定时器的局限性

在了解 requestAnimationFrame 之前，我们先来看看传统的定时器方法，如 setTimeout 和 setInterval。这两种方法可以按照一定的时间间隔执行代码，从而实现简单的动画效果。例如，以下代码使用 setInterval 来改变元素的位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #box {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        const box = document.getElementById('box');
        let position = 0;
        const intervalId = setInterval(() => {
            position += 1;
            box.style.left = position + 'px';
            if (position >= 200) {
                clearInterval(intervalId);
            }
        }, 10);
    </script>
</body>
</html>

然而，传统定时器存在一些局限性：

性能问题：setTimeout 和 setInterval 是按照固定的时间间隔执行代码，无论浏览器是否准备好进行重绘。这可能导致不必要的计算和绘制，从而影响页面的性能。
帧率不一致：不同的设备和浏览器可能有不同的帧率，固定的时间间隔可能无法保证动画在所有设备上都能流畅显示。

requestAnimationFrame 原理

requestAnimationFrame 是浏览器提供的一个 API，用于在浏览器下次重绘之前执行指定的回调函数。它的工作原理是与浏览器的重绘周期同步，浏览器会根据当前的帧率自动调整回调函数的执行频率，从而保证动画的流畅性。

requestAnimationFrame 的基本用法如下：

function animate() {
    // 动画逻辑
    console.log('Animating...');
    // 递归调用 requestAnimationFrame
    requestAnimationFrame(animate);
}
// 启动动画
requestAnimationFrame(animate);

在上述代码中，animate 函数是一个递归函数，每次调用 requestAnimationFrame 时都会请求浏览器在下一次重绘之前执行 animate 函数，从而实现连续的动画效果。

requestAnimationFrame 的优势

与传统定时器相比，requestAnimationFrame 具有以下优势：

性能优化：requestAnimationFrame 与浏览器的重绘周期同步，只在需要时执行回调函数，避免了不必要的计算和绘制，从而提高了页面的性能。
帧率自适应：浏览器会根据当前的帧率自动调整回调函数的执行频率，保证动画在不同设备和浏览器上都能流畅显示。
浏览器节能：当页面处于后台或不可见状态时，requestAnimationFrame 会自动暂停，减少了 CPU 和 GPU 的消耗，延长了设备的电池续航时间。

使用 requestAnimationFrame 实现动画效果

下面我们通过一个具体的例子来演示如何使用 requestAnimationFrame 实现动画效果。我们将创建一个简单的小球移动动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #ball {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="ball"></div>
    <script>
        const ball = document.getElementById('ball');
        let position = 0;
        let direction = 1;
        function animate() {
            position += direction;
            ball.style.left = position + 'px';
            if (position >= 200 || position <= 0) {
                direction = -direction;
            }
            requestAnimationFrame(animate);
        }
        // 启动动画
        requestAnimationFrame(animate);
    </script>
</body>
</html>

在上述代码中，我们定义了一个 animate 函数，在函数内部更新小球的位置，并根据小球的位置改变移动方向。最后，我们使用 requestAnimationFrame 递归调用 animate 函数，实现了小球的来回移动动画。

总结

对比项	传统定时器（setTimeout/setInterval）	requestAnimationFrame
性能	可能导致不必要的计算和绘制，影响性能	与浏览器重绘周期同步，性能优化
帧率	固定时间间隔，帧率可能不一致	自适应浏览器帧率，保证动画流畅
节能	即使页面不可见也会继续执行	页面不可见时自动暂停，节省资源

requestAnimationFrame 是实现动画效果的理想选择，它能够提高页面的性能，保证动画的流畅性，同时节省设备的资源。在实际开发中，我们应该优先使用 requestAnimationFrame 来实现动画效果。