js暂停动画

let start;
let animationId;
const element = document.getElementById('animatedElement');
let isPaused = false;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  
  // 更新元素位置
  element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
  
  if (!isPaused && progress < 2000) { // 动画持续2秒
    animationId = requestAnimationFrame(step);
  }
}

function startAnimation() {
  start = null;
  animationId = requestAnimationFrame(step);
}

function pauseAnimation() {
  isPaused = true;
}

function resumeAnimation() {
  isPaused = false;
  startAnimation();
}

// 开始动画
startAnimation();

// 暂停动画（例如，通过按钮点击事件）
document.getElementById('pauseButton').addEventListener('click', pauseAnimation);

// 恢复动画（例如，通过另一个按钮点击事件）
document.getElementById('resumeButton').addEventListener('click', resumeAnimation);