```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 const COLORS = { bg: '#0f172a', crust: '#38bdf8', // 天蓝 mantle: '#f59e0b', // 琥珀 core: '#ef4444', // 红色 text: '#e2e8f0', grid: '#1e293b', accent: '#22d3ee' }; // 随机数辅助 const random = (min, max) => Math.random() * (max - min) + min; export default function EarthStructureSeismicView() { // 动画状态 const [time, setTime] = useState(0); const [quakeActive, setQuakeActive] = useState(false); const [waves, setWaves] = useState([]); const [plateOffset, setPlateOffset] = useState(0); const [stressLevel, setStressLevel] = useState(0); // 引用 const requestRef = useRef(); // 地幔对流粒子 const mantleParticles = useMemo(() => { return Array.from({ length: 40 }).map((_, i) => ({ angle: (i / 40) * Math.PI * 2, radius: random(60, 120), speed: random(0.002, 0.005) * (i % 2 === 0 ? 1 : -1), size: random(1, 3) })); }, []); // 动画循环 const animate = (t) => { setTime(t / 1000); // 板块运动逻辑 (周期性) const cycleDuration = 6000; // 6秒一个周期 const cycleTime = t % cycleDuration; const progress = cycleTime / cycleDuration; // 模拟板块挤压 -> 释放 if (progress < 0.7) { // 积蓄能量阶段 setPlateOffset(progress * 20); // 板块缓慢移动 setStressLevel(progress / 0.7); // 压力值上升 setQuakeActive(false); } else if (progress < 0.75) { // 地震爆发瞬间 if (!quakeActive) setQuakeActive(true); setStressLevel(1); // 震动位移 (随机抖动) const shake = Math.sin(t * 0.1) * 5; setPlateOffset(14 + shake); // 生成震波 (限制生成频率) if (Math.random() > 0.5) { setWaves(prev => [ ...prev, { x: 750, y: 300, r: 0, opacity: 1, id: Math.random() } ]); } } else { // 回弹/平息 const recoveryProgress = (progress - 0.75) / 0.25; setPlateOffset(14 * (1 - recoveryProgress)); setStressLevel(1 - recoveryProgress); setQuakeActive(false); } // 更新震波 setWaves(prev => prev .map(w => ({ ...w, r: w.r + 5, opacity: w.opacity - 0.03 })) .filter(w => w.opacity > 0) ); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [quakeActive]); // 依赖 quakeActive 确保状态更新正确 // 渲染地幔粒子 const renderMantleParticles = () => { return mantleParticles.map((p, i) => { const currentAngle = p.angle + time * p.speed; const x = 300 + Math.cos(currentAngle) * p.radius; const y = 300 + Math.sin(currentAngle) * p.radius; return ( ); }); }; return ( ); } ```