```tsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const COLOR_BG = '#0f172a'; const COLOR_VOLTAGE = '#a855f7'; // Purple const COLOR_RESISTANCE = '#f97316'; // Orange const COLOR_CURRENT = '#06b6d4'; // Cyan const COLOR_GRID = '#1e293b'; // Helper to generate particles interface Particle { id: number; offset: number; // 0 to 1 position along path } export const OhmsLawAnimation = () => { // Physics State const [voltage, setVoltage] = useState(10); // Volts const [resistance, setResistance] = useState(5); // Ohms // Current is derived: I = V / R const current = voltage / resistance; // Animation State const [phase, setPhase] = useState(0); // 0: Voltage change, 1: Resistance change const [phaseText, setPhaseText] = useState('初始化...'); const timeRef = useRef(0); const animationRef = useRef(0); // Particle System const [particles, setParticles] = useState([]); const pathLength = 1600; // Approximate length of the circuit loop // Initialize particles useEffect(() => { const initialParticles = Array.from({ length: 30 }, (_, i) => ({ id: i, offset: i / 30, })); setParticles(initialParticles); }, []); // Main Animation Loop useEffect(() => { const loop = () => { timeRef.current += 0.016; // Approx 60fps const t = timeRef.current; // Scenario Logic: Cycle through different states const cycleDuration = 12; // seconds per cycle const cycleTime = t % cycleDuration; if (cycleTime < 5) { // Phase 1: Constant Resistance, Changing Voltage // V oscillates between 5 and 20 const newV = 12.5 + 7.5 * Math.sin((cycleTime / 5) * Math.PI * 2 - Math.PI / 2); setVoltage(newV); setResistance(5); // Constant setPhaseText('演示一：电阻不变，改变电压'); } else if (cycleTime < 10) { // Phase 2: Constant Voltage, Changing Resistance // R oscillates between 2 and 10 const normalizedTime = cycleTime - 5; const newR = 6 + 4 * Math.sin((normalizedTime / 5) * Math.PI * 2 - Math.PI / 2); setVoltage(15); // Constant setResistance(newR); setPhaseText('演示二：电压不变，改变电阻'); } else { // Transition/Pause setPhaseText('欧姆定律: I = V / R'); } // Update Particles setParticles(prev => prev.map(p => { // Speed is proportional to current // Base speed + current multiplier const speed = 0.0005 * (voltage / resistance); let newOffset = p.offset + speed; if (newOffset > 1) newOffset -= 1; return { ...p, offset: newOffset }; })); animationRef.current = requestAnimationFrame(loop); }; animationRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(animationRef.current); }, [voltage, resistance]); // Dependencies technically not needed inside RAF if using refs, but needed for state updates // Calculate visual properties const wireThickness = 8; const resistorGap = 40 + (resistance * 8); // Resistor visual width gets wider/narrower or constricts // Actually let's make the resistor a "constriction" metaphor. // High resistance = narrow path. Low resistance = wide path. const constrictionWidth = Math.max(4, 30 - resistance * 2); const batteryHeight = 20 + voltage * 3; const glowIntensity = current * 2; // Generate Circuit Path (Rounded Rectangle) // Top center is split for resistor // Bottom center is split for battery const leftX = 100; const rightX = 500; const topY = 100; const bottomY = 350; const cornerRadius = 40; // Path for particles to follow const circuitPathData = ` M ${rightX - 100} ${topY} L ${rightX - cornerRadius} ${topY} Q ${rightX} ${topY} ${rightX} ${topY + cornerRadius} L ${rightX} ${bottomY - cornerRadius} Q ${rightX} ${bottomY} ${rightX - cornerRadius} ${bottomY} L ${leftX + cornerRadius} ${bottomY} Q ${leftX} ${bottomY} ${leftX} ${bottomY - cornerRadius} L ${leftX} ${topY + cornerRadius} Q ${leftX} ${topY} ${leftX + cornerRadius} ${topY} L ${leftX + 100} ${topY} `; // Helper to get position on rounded rect (simplified for visualization) // This is a rough approximation to place particles without expensive path calculations every frame const getPos = (offset: number) => { const totalLen = (rightX - leftX) * 2 + (bottomY - topY) * 2; let pos = offset * totalLen; // Top Edge (Right half) if (pos < (rightX - leftX)/2) return { x: 300 + pos, y: topY }; pos -= (rightX - leftX)/2; // Right Edge if (pos < (bottomY - topY)) return { x: rightX, y: topY + pos }; pos -= (bottomY - topY); // Bottom Edge if (pos < (rightX - leftX)) return { x: rightX - pos, y: bottomY }; pos -= (rightX - leftX); // Left Edge if (pos < (bottomY - topY)) return { x: leftX, y: bottomY - pos }; pos -= (bottomY - topY); // Top Edge (Left half) return { x: leftX + pos, y: topY }; }; return (

); }; ```