在react本机中停止动画计时

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [isAnimating, setIsAnimating] = useState(true);

  // 其他组件代码...

  return (
    <div>
      {/* 其他组件渲染... */}
    </div>
  );
}

useEffect(() => {
  let animationId;

  const animate = () => {
    // 执行动画逻辑...
    animationId = requestAnimationFrame(animate);
  };

  if (isAnimating) {
    animationId = requestAnimationFrame(animate);
  }

  return () => cancelAnimationFrame(animationId);
}, [isAnimating]);

return (
  <div>
    <button onClick={() => setIsAnimating(!isAnimating)}>
      {isAnimating ? '停止动画' : '启动动画'}
    </button>
    {/* 其他组件渲染... */}
  </div>
);