requestAnimationFrame的用法，写一些案例代码

好的，以下是几个使用requestAnimationFrame的案例代码：

1. 滚动动画效果

const targetElement = document.querySelector('#scrollTarget');
const targetPosition = targetElement.getBoundingClientRect().top;

// 定义动画函数
function scrollAnimation() {
  const currentPosition = window.pageYOffset;
  const distance = targetPosition - currentPosition;

  // 计算滚动距离
  const scrollAmount = distance / 10;

  // 更新页面滚动位置
  window.scrollBy(0, scrollAmount);

  // 继续执行动画
  if (distance > 0) {
    requestAnimationFrame(scrollAnimation);
  }
}

// 启动动画
requestAnimationFrame(scrollAnimation);

2. 缓动动画效果

const targetElement = document.querySelector('#animationTarget');
const start = Date.now();
const duration = 1000; // 动画持续时间

// 定义动画函数
function easeAnimation() {
  const elapsed = Date.now() - start;
  const progress = Math.min(elapsed / duration, 1); // 计算动画进度

  // 计算动画数值
  const value = Math.round(progress * 100);

  // 更新页面元素
  targetElement.style.width = `${value}%`;

  // 继续执行动画
  if (progress < 1) {
    requestAnimationFrame(easeAnimation);
  }
}

// 启动动画
requestAnimationFrame(easeAnimation);

3. 游戏循环

let score = 0;
let gameOver = false;

// 定义游戏循环函数
function gameLoop() {
  // 更新游戏状态
  if (!gameOver) {
    score++;
  }

  // 更新页面元素
  document.querySelector('#score').textContent = score;

  // 继续执行游戏循环
  if (!gameOver) {
    requestAnimationFrame(gameLoop);
  }
}

// 启动游戏循环
requestAnimationFrame(gameLoop);

这些案例代码都是基于requestAnimationFrame的基础使用，具体使用场景还有很多，可以根据实际需求进行调整。