'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 辅助函数：生成圆周上的点 const getCirclePoint = (radius: number, angleDeg: number) => { const angleRad = (angleDeg - 90) * (Math.PI / 180); return { x: CENTER_X + radius * Math.cos(angleRad), y: CENTER_Y + radius * Math.sin(angleRad), }; }; export const AsynchronousMotorView = () => { // 动画状态 const [time, setTime] = useState(0); // 引用 RAF 以便清理 const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 动画循环 const animate = () => { const now = Date.now(); // 速度因子，控制整体播放速度 const delta = (now - startTimeRef.current) * 0.002; setTime(delta); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 核心物理参数 const SYNC_SPEED_FACTOR = 1.0; // 同步转速系数 const SLIP = 0.15; // 转差率 (15% visible slip for demo) const ROTOR_SPEED_FACTOR = SYNC_SPEED_FACTOR * (1 - SLIP); // 计算当前角度 const syncAngle = (time * SYNC_SPEED_FACTOR * 180) / Math.PI; // 旋转磁场角度 const rotorAngle = (time * ROTOR_SPEED_FACTOR * 180) / Math.PI; // 转子角度 const slipAngle = syncAngle - rotorAngle; // 相对角度 (用于计算感应电流强度) // 三相电流计算 (相差120度) const phaseA = Math.cos(time); const phaseB = Math.cos(time - (2 * Math.PI) / 3); const phaseC = Math.cos(time - (4 * Math.PI) / 3); // 颜色定义 const colors = { bg: '#0f172a', stator: '#334155', statorBorder: '#475569', rotor: '#94a3b8', rotorBar: '#cbd5e1', phaseA: '#ef4444', // Red phaseB: '#22c55e', // Green phaseC: '#3b82f6', // Blue field: '#fbbf24', // Amber/Gold (Magnetic Field) text: '#e2e8f0', grid: '#1e293b' }; // 生成背景网格 const gridLines = useMemo(() => { const lines = []; for (let i = 0; i <= VIEW_WIDTH; i += 50) { lines.push(); } for (let i = 0; i <= VIEW_HEIGHT; i += 50) { lines.push(); } return lines; }, []); return ( ); };