'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 视图常量 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COIL_CENTER_X = VIEW_WIDTH / 2; const COIL_CENTER_Y = VIEW_HEIGHT / 2; const COIL_RADIUS = 70; const COIL_LOOPS = 12; const COIL_WIDTH = 300; export default function ElectromagneticInduction() { // 动画状态 const [animState, setAnimState] = useState({ magnetX: -200, // 磁铁位置 velocity: 0, // 磁铁速度 current: 0, // 感应电流强度 flux: 0, // 磁通量模拟值 electronOffset: 0, // 电子流动偏移量 }); // 使用 ref 存储不触发重绘但需要在帧之间累积的数据 const physicsRef = useRef({ time: 0, electronPos: 0, }); // 动画循环 useEffect(() => { let animationFrameId; const loop = () => { const t = performance.now() / 1000; // 秒 const dt = t - physicsRef.current.time; physicsRef.current.time = t; // 1. 计算磁铁运动 (简谐运动模拟实验操作) // 周期约 4秒 const frequency = 0.5; const amplitude = 350; const centerX = COIL_CENTER_X; // 让磁铁在线圈左侧和右侧之间穿梭 // x(t) const rawPos = Math.sin(t * frequency * Math.PI * 2); const magnetX = centerX + rawPos * amplitude; // 2. 计算速度 v(t) (导数) // v 正比于 cos(...) const velocity = rawPos - (Math.sin((t - 0.016) * frequency * Math.PI * 2)); // 简单差分计算瞬时速度方向 // 3. 计算感应电流 (法拉第电磁感应定律 + 楞次定律) // 只有当磁铁在线圈附近时，磁通量变化才剧烈 // 使用高斯函数模拟磁场强度随距离衰减 const distToCoil = Math.abs(magnetX - centerX); const fieldStrength = Math.exp(-(distToCoil * distToCoil) / (2 * 150 * 150)); // 靠近线圈时场强最大 // dΦ/dt ∝ v * B // 感应电动势 E ∝ - dΦ/dt // 这里的 velocity 包含了方向，fieldStrength 是标量 // 当磁铁穿过线圈中心时，磁通量最大，但变化率(dΦ/dt)在中心点瞬间为0吗？ // 不，磁通量Φ是位置的函数。E = -dΦ/dt = -(dΦ/dx * dx/dt) = -(dΦ/dx * v) // 磁场分布大致是钟形，进入时 flux 增加，离开时 flux 减少。 // 进入(v>0, x dΦ/dt > 0 -> E < 0 // 离开(v>0, x>center): flux减少 -> dΦ/dt < 0 -> E > 0 // 模拟 dΦ/dx (磁通量对位置的导数): 在中心左侧为正，右侧为负 const dFlux_dx = (centerX - magnetX) / 200 * Math.exp(-(distToCoil * distToCoil) / (30000)); // 电流 I ∝ E // 增加一些平滑系数 const rawCurrent = dFlux_dx * (velocity * 100) * 100; // 限制最大电流显示范围 const clampedCurrent = Math.max(-100, Math.min(100, rawCurrent)); // 4. 更新电子流动位置 // 电子流速与电流成正比 physicsRef.current.electronPos -= clampedCurrent * 0.5; // 负号因为电子带负电，电流方向与电子运动相反 setAnimState({ magnetX, velocity: velocity * 1000, current: clampedCurrent, flux: fieldStrength * 100, // 仅用于UI显示磁场强弱 electronOffset: physicsRef.current.electronPos }); animationFrameId = requestAnimationFrame(loop); }; // 启动 animationFrameId = requestAnimationFrame(loop); return () => { cancelAnimationFrame(animationFrameId); }; }, []); // 预计算线圈几何 (分前后两部分以实现3D遮挡) const { backCoils, frontCoils, wirePath } = useMemo(() => { const backs = []; const fronts = []; const step = COIL_WIDTH / COIL_LOOPS; const startX = COIL_CENTER_X - COIL_WIDTH / 2; // 生成螺旋线路径数据 let pathD = `M ${startX} ${COIL_CENTER_Y - COIL_RADIUS}`; for (let i = 0; i < COIL_LOOPS; i++) { const x = startX + i * step; const nextX = startX + (i + 1) * step; // 后半圈 (上 -> 下) backs.push( ); // 前半圈 (下 -> 上) - 注意这里为了视觉连贯，实际绘制顺序需要调整 // 我们把螺旋拆分为：上半圆(后) 和下半圆(前) ? // 或者：后半圆(Y < CenterY, Z far) 和前半圆 (Y > CenterY, Z near)? // 简单的 2.5D： // 上半部分(远端) backs.push( ); } // 重写生成逻辑，更清晰的 3D 感 const bCoils = []; const fCoils = []; // 连接电路的导线路径 const circuitPath = ` M ${startX} ${COIL_CENTER_Y - COIL_RADIUS} L ${startX - 50} ${COIL_CENTER_Y - COIL_RADIUS} L ${startX - 50} ${VIEW_HEIGHT - 100} L ${VIEW_WIDTH/2 - 50} ${VIEW_HEIGHT - 100} L ${VIEW_WIDTH/2 - 50} ${VIEW_HEIGHT - 180} M ${VIEW_WIDTH/2 + 50} ${VIEW_HEIGHT - 180} L ${VIEW_WIDTH/2 + 50} ${VIEW_HEIGHT - 100} L ${startX + COIL_WIDTH + 50} ${VIEW_HEIGHT - 100} L ${startX + COIL_WIDTH + 50} ${COIL_CENTER_Y - COIL_RADIUS} L ${startX + COIL_WIDTH} ${COIL_CENTER_Y - COIL_RADIUS} `; for (let i = 0; i < COIL_LOOPS; i++) { const cx = startX + i * step; // 后半段弧线 (Top arc) bCoils.push( ); // 前半段弧线 (Bottom arc -> Next Top) - 修正：螺旋应该是连续的 // 简化视觉：用椭圆切片。 // 上半圆弧 (Back) bCoils.push( ); // 下半圆弧 (Front) fCoils.push( ); } return { backCoils: bCoils, frontCoils: fCoils, wirePath: circuitPath }; }, []); // 动态颜色计算 const coilColor = animState.current > 5 ? '#38bdf8' : (animState.current < -5 ? '#f472b6' : '#94a3b8'); const glowOpacity = Math.min(Math.abs(animState.current) / 50, 1); // 磁力线生成 const magnetLines = useMemo(() => { // 静态定义，但在渲染时通过 transform 移动 return [-1, 1].map(side => ( Array.from({length: 3}).map((_, i) => ( )) )); }, []); return ( ); }