'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 粒子类型定义 interface Particle { id: number; x: number; y: number; speed: number; radius: number; opacity: number; wobbleOffset: number; type: 'reactor' | 'tube' | 'jar'; pathProgress?: number; // 0-1 for tube travel } export const HydrogenLabView = () => { // 状态管理 const [bubbles, setBubbles] = useState([]); const [reactionProgress, setReactionProgress] = useState(0); const [waterLevel, setWaterLevel] = useState(100); // 100% full const [isReacting, setIsReacting] = useState(false); // Refs for animation loop const requestRef = useRef(); const bubblesRef = useRef([]); const progressRef = useRef(0); const waterLevelRef = useRef(100); // 管道路径定义 (近似坐标) // 从试管口 (250, 250) -> 向上 -> 向右 -> 向下 -> 进入水槽 const tubePathPoints = [ { x: 250, y: 220 }, { x: 250, y: 150 }, { x: 650, y: 150 }, { x: 650, y: 450 }, // 水槽底部出口 ]; // 初始化动画 useEffect(() => { const startReaction = () => { setIsReacting(true); progressRef.current = 0; waterLevelRef.current = 100; bubblesRef.current = []; const animate = (time: number) => { // 1. 更新反应进度 if (progressRef.current < 100) { progressRef.current += 0.05; } else { // 循环播放 setTimeout(() => { progressRef.current = 0; waterLevelRef.current = 100; bubblesRef.current = []; }, 3000); } setReactionProgress(progressRef.current); // 2. 生成气泡逻辑 if (progressRef.current < 95 && Math.random() < 0.3) { // 反应器内的气泡 (Zn表面产生) bubblesRef.current.push({ id: Math.random(), x: 230 + Math.random() * 40, // 锌粒区域 y: 480, speed: 1 + Math.random() * 1.5, radius: 2 + Math.random() * 3, opacity: 0.8, wobbleOffset: Math.random() * Math.PI * 2, type: 'reactor' }); } // 3. 更新所有气泡位置 bubblesRef.current = bubblesRef.current.map(b => { let newY = b.y; let newX = b.x; let newProgress = b.pathProgress || 0; let newType = b.type; let shouldRemove = false; if (b.type === 'reactor') { newY -= b.speed; newX += Math.sin(time / 100 + b.wobbleOffset) * 0.5; // 到达液面/管口附近 if (newY < 220) { newType = 'tube'; newProgress = 0; } } else if (b.type === 'tube') { // 沿路径移动 newProgress += 0.01 * b.speed; if (newProgress >= 1) { newType = 'jar'; newY = 450; // 水槽出口高度 newX = 650 + (Math.random() - 0.5) * 40; // 扩散 } else { // 简单的路径插值 const totalLen = 3; // segments const segment = Math.floor(newProgress * totalLen); const t = (newProgress * totalLen) - segment; const p1 = tubePathPoints[segment]; const p2 = tubePathPoints[segment + 1] || tubePathPoints[segment]; if (p1 && p2) { newX = p1.x + (p2.x - p1.x) * t; newY = p1.y + (p2.y - p1.y) * t; } } } else if (b.type === 'jar') { // 在集气瓶中上升 newY -= b.speed * 1.2; newX += Math.sin(time / 80 + b.wobbleOffset) * 1; // 排水集气法：气泡到达顶部，水位下降 const currentWaterY = 250 + (100 - waterLevelRef.current) * 2; // 顶部基准 if (newY < currentWaterY + 20) { shouldRemove = true; if (waterLevelRef.current > 5) { waterLevelRef.current -= 0.08; } } } return { ...b, x: newX, y: newY, pathProgress: newProgress, type: newType, remove: shouldRemove }; }).filter((b: any) => !b.remove); setBubbles([...bubblesRef.current]); setWaterLevel(waterLevelRef.current); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); }; startReaction(); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 锌粒生成 const zincParticles = useMemo(() => { return Array.from({ length: 15 }).map((_, i) => ({ x: 220 + Math.random() * 60, y: 480 + Math.random() * 20, r: 6 + Math.random() * 4, rotation: Math.random() * 360 })); }, []); return ( ); };