JavaScript requestAnimationFrame 定时刷新

requestAnimationFrame (RAF) 是 JavaScript 中的一个函数，它用于在下一次重绘之前请求浏览器调用一个指定的函数。这对于创建动画非常有用，因为你可以将每一帧的绘制工作安排在屏幕的下一次重绘之前。这样可以提高性能，并且使得动画更加流畅。

下面是一个简单的使用 requestAnimationFrame 创建动画的例子：

步骤 1: 创建 HTML 文件

首先，你需要一个基本的 HTML 文件来显示你的动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Animation</title>
    <style>
        #myCanvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script src="animation.js"></script>
</body>
</html>

步骤 2: 编写 JavaScript 代码

然后，在你的 JavaScript 文件（如 animation.js）中，你需要初始化 canvas，并设置动画逻辑。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

let position = { x: 50, y: 50 };
let velocity = { x: 3, y: 3 };

function animate() {
    // 清除上一帧
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制新的位置
    context.fillStyle = 'blue';
    context.fillRect(position.x, position.y, 50, 50);

    // 更新位置
    position.x += velocity.x;
    position.y += velocity.y;

    // 反弹效果
    if (position.x + 50 >= canvas.width || position.x <= 0) {
        velocity.x = -velocity.x;
    }

    if (position.y + 50 >= canvas.height || position.y <= 0) {
        velocity.y = -velocity.y;
    }

    // 请求下一帧
    requestAnimationFrame(animate);
}

// 开始动画
animate();

这段代码做了以下几件事：

获取了 canvas 元素，并获取了它的 2D 上下文。
定义了一个 animate 函数，该函数负责绘制每一帧。
在每一帧中，清除画布，然后在新的位置绘制一个矩形。
检查如果矩形碰到边界，则改变速度方向，实现反弹效果。
使用 requestAnimationFrame 调用 animate 函数，这会请求浏览器在下次重绘前调用 animate。

运行动画

当你在浏览器中打开 HTML 文件时，动画应该开始运行。如果一切正常，你会看到一个蓝色的方块在画布内来回移动。

这就是一个基本的 requestAnimationFrame 动画示例。你可以在此基础上添加更多的功能，比如键盘控制、更复杂的图形等。

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏