JS requestAnimationFrame详解|极客笔记

JS requestAnimationFrame详解

在前端开发中，我们经常会遇到动画效果的实现，而requestAnimationFrame是一个常用的方法来优化动画性能。本文将详细介绍requestAnimationFrame的使用方法、优势以及一些注意事项。

什么是requestAnimationFrame

requestAnimationFrame是JavaScript中的一个方法，用于请求浏览器执行一个动画，并在下次重绘之前更新动画。它接受一个回调函数作为参数，告诉浏览器您希望执行动画，并返回一个ID，可以用来取消动画。

const animationId = requestAnimationFrame(callback);

在实际开发中，我们通常会将动画相关的逻辑放在回调函数中，然后通过requestAnimationFrame来不断调用这个回调函数以实现动画效果。

为什么使用requestAnimationFrame

与传统的setTimeout或setInterval方法相比，requestAnimationFrame有以下优势：

自动优化性能：requestAnimationFrame会根据浏览器的重绘频率来调整动画的帧率，避免造成掉帧或卡顿现象，可以获得更加流畅的动画效果。
节省电量：由于requestAnimationFrame会在浏览器的下一次重绘时执行回调函数，可以减少不必要的计算，从而节省电量。
在后台标签页暂停：当页面被切换到后台标签页时，requestAnimationFrame会自动暂停执行，避免消耗不必要的资源。

使用示例

下面是一个简单的示例，使用requestAnimationFrame来实现一个循环旋转的动画效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Demo</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #007bff;
        }
    </style>
</head>

<body>
    <div class="box" id="box"></div>

    <script>
        const box = document.getElementById('box');
        let angle = 0;

        function animate() {
            angle += 1;
            box.style.transform = `rotate(${angle}deg)`;

            requestAnimationFrame(animate);
        }

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

</html>

上面的示例中，我们创建了一个蓝色正方形，并通过不断调用requestAnimationFrame来更新它的旋转角度，实现了一个简单的旋转动画效果。

注意事项

在使用requestAnimationFrame时，需要注意以下几点：

递归调用：在回调函数中一定要记得调用requestAnimationFrame，否则动画将停止。
性能优化：尽量减少在回调函数中的计算量，避免占用过多的CPU资源。
兼容性：requestAnimationFrame在大多数现代浏览器中都得到支持，但在一些旧版本浏览器中可能存在兼容性问题，建议对于老版本浏览器做降级处理。