<!DOCTYPE html>
<html>
<head>
<title>requestAnimationFrame 示例</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
const box = document.getElementById('box');
let positionX = 0;
// 定义动画函数
function animate() {
// 更新盒子的位置
box.style.transform = `translateX(${positionX}px)`;
// 更新下一帧的位置
positionX += 1;
// 通过 requestAnimationFrame 递归调用动画函数
requestAnimationFrame(animate);
}
// 启动动画
requestAnimationFrame(animate);
</script>
</body>
</html>