import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; // 粒子/纸屑类型定义 interface Scrap { id: number; x: number; y: number; rotation: number; color: string; vx: number; vy: number; isStuck: boolean; stuckOffsetX: number; stuckOffsetY: number; mass: number; } interface Electron { id: number; x: number; y: number; targetX: number; targetY: number; progress: number; speed: number; } export const ElectrostaticDemo = () => { // 动画阶段: 'IDLE' | 'RUBBING' | 'CHARGED_MOVE' | 'ADSORPTION' | 'RESET' const [phase, setPhase] = useState('IDLE'); const [chargeLevel, setChargeLevel] = useState(0); // 0 to 100 // 引用动画状态以避免重渲染 const rulerPos = useRef({ x: 200, y: 300, rotation: 0 }); const scrapsRef = useRef([]); const electronsRef = useRef([]); const animationRef = useRef(); const startTimeRef = useRef(0); // 初始化纸屑 useEffect(() => { const initScraps = () => { const newScraps: Scrap[] = []; for (let i = 0; i < 30; i++) { newScraps.push({ id: i, x: 550 + Math.random() * 180, y: 520 + Math.random() * 20, // 地面位置 rotation: Math.random() * 360, color: Math.random() > 0.5 ? '#f1f5f9' : '#e2e8f0', // 纸屑颜色 vx: 0, vy: 0, isStuck: false, stuckOffsetX: 0, stuckOffsetY: 0, mass: 0.5 + Math.random() * 0.5 }); } scrapsRef.current = newScraps; }; initScraps(); }, []); // 动画主循环 useEffect(() => { const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // 状态机逻辑 if (phase === 'IDLE') { if (elapsed > 1000) { setPhase('RUBBING'); startTimeRef.current = timestamp; } } else if (phase === 'RUBBING') { // 摩擦动画：尺子在毛衣上来回移动 const progress = Math.min(elapsed / 4000, 1); rulerPos.current.x = 200 + Math.sin(elapsed * 0.02) * 80; rulerPos.current.y = 400 + Math.cos(elapsed * 0.04) * 10; rulerPos.current.rotation = Math.sin(elapsed * 0.02) * 10; setChargeLevel(Math.floor(progress * 100)); // 生成电子动画 (从毛衣到尺子) if (Math.random() < 0.3) { electronsRef.current.push({ id: Math.random(), x: 150 + Math.random() * 100, // 毛衣区域 y: 450 + Math.random() * 50, targetX: 0, // 稍后计算相对于尺子的位置 targetY: 0, progress: 0, speed: 0.02 + Math.random() * 0.03 }); } if (progress >= 1) { setPhase('CHARGED_MOVE'); startTimeRef.current = timestamp; } } else if (phase === 'CHARGED_MOVE') { // 尺子移动到纸屑上方 const progress = Math.min(elapsed / 1500, 1); // Ease out cubic const ease = 1 - Math.pow(1 - progress, 3); const startX = 200; const startY = 400; const targetX = 640; const targetY = 350; rulerPos.current.x = startX + (targetX - startX) * ease; rulerPos.current.y = startY + (targetY - startY) * ease; rulerPos.current.rotation = 0 + (0 - 0) * ease; // 转正 if (progress >= 1) { setPhase('ADSORPTION'); startTimeRef.current = timestamp; } } else if (phase === 'ADSORPTION') { // 吸附物理模拟 const rulerX = rulerPos.current.x; const rulerY = rulerPos.current.y; // 尺子底部大约在 y + 20 const rulerBottom = rulerY + 25; // 尺子轻微悬浮 rulerPos.current.y = 350 + Math.sin(elapsed * 0.005) * 5; scrapsRef.current.forEach(scrap => { if (scrap.isStuck) { // 跟随尺子移动 scrap.x = rulerPos.current.x + scrap.stuckOffsetX; scrap.y = rulerPos.current.y + scrap.stuckOffsetY; } else { // 计算距离 const dx = rulerX - scrap.x; const dy = rulerBottom - scrap.y; const dist = Math.sqrt(dx * dx + dy * dy); // 静电力 (模拟) if (dist < 200) { const force = (5000 / (dist * dist)) / scrap.mass; const angle = Math.atan2(dy, dx); scrap.vx += Math.cos(angle) * force; scrap.vy += Math.sin(angle) * force; // 空气阻力 scrap.vx *= 0.9; scrap.vy *= 0.9; // 极化旋转 (纸屑尖端指向尺子) const targetRotation = (angle * 180) / Math.PI + 90; scrap.rotation += (targetRotation - scrap.rotation) * 0.1; } // 更新位置 scrap.x += scrap.vx; scrap.y += scrap.vy; // 碰撞检测 (吸附判定) // 简单的矩形判定，尺子大概 300x60 if ( Math.abs(scrap.x - rulerX) < 140 && Math.abs(scrap.y - rulerY) < 30 ) { scrap.isStuck = true; scrap.stuckOffsetX = scrap.x - rulerX; scrap.stuckOffsetY = scrap.y - rulerY; scrap.vx = 0; scrap.vy = 0; } // 地面边界 if (scrap.y > 540) { scrap.y = 540; scrap.vy = 0; scrap.vx *= 0.5; // 摩擦力 } } }); if (elapsed > 6000) { setPhase('RESET'); startTimeRef.current = timestamp; } } else if (phase === 'RESET') { // 重置逻辑 setChargeLevel(prev => Math.max(0, prev - 2)); electronsRef.current = []; // 纸屑掉落 scrapsRef.current.forEach(scrap => { scrap.isStuck = false; if (scrap.y < 540) { scrap.vy += 0.5; // 重力 scrap.y += scrap.vy; scrap.x += Math.sin(scrap.y * 0.1) * 0.5; // 飘落效果 } else { scrap.y = 540; scrap.vy = 0; } }); // 尺子回到原位 const progress = Math.min(elapsed / 1000, 1); rulerPos.current.x = 640 + (200 - 640) * progress; rulerPos.current.y = 350 + (300 - 350) * progress; if (elapsed > 2000 && chargeLevel <= 0) { // 完全重置 const initScraps = []; for (let i = 0; i < 30; i++) { initScraps.push({ id: i, x: 550 + Math.random() * 180, y: 520 + Math.random() * 20, rotation: Math.random() * 360, color: Math.random() > 0.5 ? '#f1f5f9' : '#e2e8f0', vx: 0, vy: 0, isStuck: false, stuckOffsetX: 0, stuckOffsetY: 0, mass: 0.5 + Math.random() * 0.5 }); } scrapsRef.current = initScraps; setPhase('IDLE'); } } // 更新电子位置 electronsRef.current = electronsRef.current.filter(e => e.progress < 1); electronsRef.current.forEach(e => { e.progress += e.speed; // 目标是尺子当前的相对位置 const tx = rulerPos.current.x + (Math.random() - 0.5) * 280; const ty = rulerPos.current.y + (Math.random() - 0.5) * 40; const dx = tx - e.x; const dy = ty - e.y; e.x += dx * 0.1; e.y += dy * 0.1; }); animationRef.current = requestAnimationFrame(animate); }; animationRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationRef.current!); }, [phase, chargeLevel]); // 渲染辅助文字 const getPhaseText = () => { switch(phase) { case 'IDLE': return { title: "准备实验材料", sub: "塑料尺、羊毛织物、纸屑" }; case 'RUBBING': return { title: "摩擦起电", sub: "电子从羊毛转移到塑料尺，尺子带负电" }; case 'CHARGED_MOVE': return { title: "带电体移动", sub: "尺子带有静电，靠近轻小物体" }; case 'ADSORPTION': return { title: "静电吸附", sub: "带电体吸引轻小物体 (极化现象)" }; case 'RESET': return { title: "电荷中和", sub: "实验重置中..." }; default: return { title: "", sub: "" }; } }; const textInfo = getPhaseText(); return ( ); };