js怎么实现一个动画暂停

let isPaused = false;
let requestId;

function animate(timestamp) {
  if (!isPaused) {
    // 动画逻辑
    console.log('动画执行中...');
    requestId = requestAnimationFrame(animate);
  }
}

requestId = requestAnimationFrame(animate);

// 暂停动画
function pauseAnimation() {
  isPaused = true;
  cancelAnimationFrame(requestId);
}

// 恢复动画
function resumeAnimation() {
  isPaused = false;
  requestId = requestAnimationFrame(animate);
}

/* CSS */
@keyframes example {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.animated {
  animation: example 2s infinite;
}

.paused {
  animation-play-state: paused;
}

// JavaScript
const element = document.getElementById('animatedElement');

// 开始动画
element.classList.add('animated');

// 暂停动画
function pauseAnimation() {
  element.classList.add('paused');
}

// 恢复动画
function resumeAnimation() {
  element.classList.remove('paused');
}

.animated {
  will-change: transform;
  animation: example 2s infinite;
}