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();

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

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

运行动画

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

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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
JavaScript screen对象
HTML input radio 单选按钮
WordPress 常用函数 / sanitize_user
WordPress 上传附件
JavaScript Proxy 代理
JavaScript 中 0.1 加 0.2 不等于 0.3 的原因和解决方法
WordPress 语言文件
支持 Selector API 的 HTML 解析器 node-html-parser