```jsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; import * as Lucide from 'lucide-react'; // 动画常量定义 const WIDTH = 1200; const HEIGHT = 700; const PRISM_X = 600; const PRISM_Y = 350; const EMITTER_X = 100; const EMITTER_Y = 350; const SPECTRUM_START_X = 600; const SPECTRUM_END_X = 1100; const SPECTRUM_TOP_Y = 150; const SPECTRUM_BOTTOM_Y = 550; // 缓动函数 const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3); const easeOutExpo = (x) => (x === 1 ? 1 : 1 - Math.pow(2, -10 * x)); export const OpticalPrismExperiment = () => { // 动画状态 Ref (避免频繁 State 更新导致的闭包陷阱) const frameRef = useRef(0); const requestRef = useRef(null); // 粒子系统 Ref const particlesRef = useRef( Array.from({ length: 50 }).map(() => ({ x: Math.random() * 500, y: Math.random() * 400 - 200, // 相对于中心 Y speed: Math.random() * 2 + 1, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1, })) ); // 用于触发渲染的 State (每帧更新) const [animState, setAnimState] = useState({ phase: 0, // 0:Charge, 1:Laser, 2:Expand, 3:Scan laserLen: 0, spectrumWidth: 0, scannerX: 0, wavePoints: "", wavelength: 0, emitterGlow: 0, particles: [], time: 0 }); // 动画主循环 useEffect(() => { const startTime = Date.now(); const loop = () => { const now = Date.now(); const elapsed = now - startTime; const frame = frameRef.current; frameRef.current++; // 阶段控制 let currentPhase = 0; let laserLen = 0; let spectrumWidth = 0; let scannerX = 0; // 阶段 1: 充能 (0 - 1.5s) if (elapsed < 1500) { currentPhase = 0; } // 阶段 2: 激光射出 (1.5s - 2s) else if (elapsed < 2000) { currentPhase = 1; const progress = Math.min((elapsed - 1500) / 500, 1); laserLen = easeOutExpo(progress) * (PRISM_X - EMITTER_X); } // 阶段 3: 光谱展开 (2s - 3s) else if (elapsed < 3000) { currentPhase = 2; laserLen = PRISM_X - EMITTER_X; const progress = Math.min((elapsed - 2000) / 1000, 1); spectrumWidth = easeOutCubic(progress) * (SPECTRUM_END_X - SPECTRUM_START_X); } // 阶段 4: 扫描循环 (3s +) else { currentPhase = 3; laserLen = PRISM_X - EMITTER_X; spectrumWidth = SPECTRUM_END_X - SPECTRUM_START_X; // 扫描线循环逻辑 (周期 3秒) const scanProgress = ((elapsed - 3000) % 3000) / 3000; scannerX = scanProgress * spectrumWidth; } // 粒子更新 if (currentPhase >= 2) { particlesRef.current.forEach(p => { p.x += p.speed; if (p.x > spectrumWidth) p.x = 0; }); } // 波形图生成 let wavePts = ""; if (currentPhase === 3) { const baseFreq = 0.05; const amp = 30; const points = []; // 只生成扫描线附近的波形 const startX = 600; const width = 500; const steps = 50; for (let i = 0; i <= steps; i++) { const px = startX + (i / steps) * width; const relX = px - (600 + scannerX); // 相对扫描线的位置 // 距离扫描线越近，震动越大 const distFactor = Math.max(0, 1 - Math.abs(relX) / 100); const py = 620 + Math.sin(frame * 0.2 + i * 0.5) * amp * distFactor; points.push(`${px},${py}`); } wavePts = points.join(" "); } // 计算波长数值 (380 - 750 nm) const currentNm = currentPhase === 3 ? Math.floor(380 + (scannerX / (SPECTRUM_END_X - SPECTRUM_START_X)) * (750 - 380)) : 0; // 呼吸灯 const glow = 0.5 + 0.5 * Math.sin(elapsed * 0.005); setAnimState({ phase: currentPhase, laserLen, spectrumWidth, scannerX, wavePoints: wavePts, wavelength: currentNm, emitterGlow: glow, particles: currentPhase >= 2 ? [...particlesRef.current] : [], // 浅拷贝触发渲染 time: elapsed }); requestRef.current = requestAnimationFrame(loop); }; requestRef.current = requestAnimationFrame(loop); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 静态资源 Memo const gridLines = useMemo(() => { const lines = []; // 垂直线 for (let i = 0; i <= WIDTH; i += 50) { lines.push(); } // 水平线 for (let i = 0; i <= HEIGHT; i += 50) { lines.push(); } return lines; }, []); return (

{/* 根容器固定比例 */}

{/* UI 标题层 */}

精密光学实验室

PRECISION OPTICAL LAB // SIMULATION_V2.0

{/* 顶部右侧时间码 */}

T: {(animState.time / 1000).toFixed(2)}s

FRAME: {frameRef.current}

{/* 全局样式覆盖 blink 动画 */}

); }; ```