'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export default function TransistorWorkingPrinciple() { const [phase, setPhase] = useState(0); // 0: Off, 1: Gate Charging, 2: Channel Formed, 3: Conducting const [electrons, setElectrons] = useState([]); const requestRef = useRef(); // 模拟生命周期：循环展示工作原理 useEffect(() => { const timer = setInterval(() => { setPhase((prev) => (prev + 1) % 4); }, 4000); return () => clearInterval(timer); }, []); // 粒子系统：生成电子 useEffect(() => { const initialElectrons = Array.from({ length: 40 }, (_, i) => ({ id: i, x: 250 + Math.random() * 100, y: 350 + Math.random() * 80, targetX: 0, targetY: 0, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, opacity: Math.random() })); setElectrons(initialElectrons); const animate = () => { setElectrons((prev) => prev.map((e) => { let { x, y, vx, vy } = e; if (phase === 0) { // 截止状态：电子在源极区域随机扰动 vx += (Math.random() - 0.5) * 0.1; vy += (Math.random() - 0.5) * 0.1; x += vx; y += vy; if (x < 220 || x > 380) vx *= -1; if (y < 320 || y > 450) vy *= -1; } else if (phase === 1 || phase === 2) { // 栅极加压：电子被吸引到交界处形成沟道 const targetY = 285 + Math.random() * 10; y += (targetY - y) * 0.05; x += (Math.random() - 0.5) * 0.5; } else if (phase === 3) { // 导通状态：电子从源极流向漏极 x += 6; if (x > 780) { x = 220 + Math.random() * 50; y = 285 + Math.random() * 10; } y += (290 - y) * 0.1; } return { ...e, x, y, vx: vx * 0.9, vy: vy * 0.9 }; }) ); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [phase]); return (

); }