import React, { useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export const GeneralRelativityView = () => { const canvasRef = useRef(null); // 使用 useRef 存储所有动画状态，避免 React 重渲染 const animationState = useRef({ frame: 0, phase: 0, // 0: Flat, 1: Warping, 2: Orbit, 3: Lensing massStrength: 0, // 当前引力源强度 targetMassStrength: 0, gridPoints: [], planet: { x: -100, y: 100, vx: 0, vy: 0, active: false, trail: [] }, photons: [], textOpacity: 0, currentText: "", subText: "" }); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); // 初始化网格点 const spacing = 40; const cols = Math.ceil(VIEW_WIDTH / spacing) + 2; const rows = Math.ceil(VIEW_HEIGHT / spacing) + 2; const points = []; for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { points.push({ ox: (i - 1) * spacing, // 原始 X oy: (j - 1) * spacing, // 原始 Y x: (i - 1) * spacing, y: (j - 1) * spacing }); } } animationState.current.gridPoints = points; let animationFrameId; // 辅助函数：绘制发光文字 const drawText = (context, text, sub, opacity) => { if (opacity <= 0) return; context.save(); context.globalAlpha = opacity; context.textAlign = "center"; context.textBaseline = "middle"; // 主标题 context.font = "bold 32px 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; context.shadowColor = "rgba(255, 255, 255, 0.5)"; context.shadowBlur = 10; context.fillStyle = "#e2e8f0"; context.fillText(text, VIEW_WIDTH / 2, 80); // 副标题（英文术语） context.font = "italic 16px 'Segoe UI', Roboto, sans-serif"; context.shadowBlur = 0; context.fillStyle = "#94a3b8"; context.fillText(sub, VIEW_WIDTH / 2, 115); context.restore(); }; // 核心渲染循环 const render = () => { const state = animationState.current; state.frame++; // 1. 状态机控制 (Phase Control) const cycle = 1200; // 完整循环帧数 const localFrame = state.frame % cycle; if (localFrame < 200) { // 阶段一：平直时空 state.phase = 0; state.targetMassStrength = 0; state.currentText = "平直时空：无物质分布"; state.subText = "Flat Spacetime (Euclidean Metric)"; } else if (localFrame < 500) { // 阶段二：质量介入，时空弯曲 state.phase = 1; state.targetMassStrength = 150; // 目标引力强度 state.currentText = "物质告诉时空如何弯曲"; state.subText = "Matter tells Spacetime how to curve (Einstein Field Equations)"; state.planet.active = false; } else if (localFrame < 900) { // 阶段三：测地线运动 (行星轨道) state.phase = 2; state.targetMassStrength = 150; state.currentText = "时空告诉物质如何运动"; state.subText = "Spacetime tells Matter how to move (Geodesics)"; // 初始化行星 if (!state.planet.active && localFrame > 510) { state.planet.active = true; state.planet.x = 100; state.planet.y = VIEW_HEIGHT / 2 - 180; state.planet.vx = 4.5; // 初始切向速度 state.planet.vy = 0; state.planet.trail = []; } } else { // 阶段四：光线偏折 state.phase = 3; state.targetMassStrength = 150; state.currentText = "引力透镜：光线的偏折"; state.subText = "Gravitational Lensing & Light Deflection"; state.planet.active = false; // 发射光子 if (localFrame % 20 === 0 && localFrame < 1100) { state.photons.push({ x: 0, y: VIEW_HEIGHT / 2 - 100 - Math.random() * 50, vx: 12, // 光速更快 vy: 0, life: 100 }); state.photons.push({ x: 0, y: VIEW_HEIGHT / 2 + 100 + Math.random() * 50, vx: 12, vy: 0, life: 100 }); } } // 平滑过渡引力强度 state.massStrength += (state.targetMassStrength - state.massStrength) * 0.05; // 清空画布 ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, VIEW_WIDTH, VIEW_HEIGHT); // 绘制背景装饰（微弱的星光） for (let k = 0; k < 50; k++) { const sx = (k * 137.5 + state.frame * 0.1) % VIEW_WIDTH; const sy = (k * 293.1) % VIEW_HEIGHT; ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.fillRect(sx, sy, 1, 1); } // --- 物理计算：网格弯曲 --- const centerX = VIEW_WIDTH / 2; const centerY = VIEW_HEIGHT / 2; // 更新网格点位置 for (let p of state.gridPoints) { const dx = p.ox - centerX; const dy = p.oy - centerY; const distSq = dx * dx + dy * dy; const dist = Math.sqrt(distSq); // 引力公式模拟：距离越近，向中心拉伸越强 // 使用软化因子防止除以零 const pullFactor = state.massStrength * 300 / (distSq + 5000); p.x = p.ox - dx * pullFactor; p.y = p.oy - dy * pullFactor; } // --- 绘制：网格 --- ctx.strokeStyle = 'rgba(56, 189, 248, 0.3)'; // Sky-400 with opacity ctx.lineWidth = 1; ctx.beginPath(); // 绘制横线 for (let j = 0; j < rows; j++) { const startIdx = j; const rowPoints = []; for (let i = 0; i < cols; i++) { rowPoints.push(state.gridPoints[i * rows + j]); } // 贝塞尔曲线连接点以获得平滑的弯曲效果 if (rowPoints.length > 0) { ctx.moveTo(rowPoints[0].x, rowPoints[0].y); for (let k = 0; k < rowPoints.length - 1; k++) { const xc = (rowPoints[k].x + rowPoints[k+1].x) / 2; const yc = (rowPoints[k].y + rowPoints[k+1].y) / 2; ctx.quadraticCurveTo(rowPoints[k].x, rowPoints[k].y, xc, yc); } } } // 绘制竖线 for (let i = 0; i < cols; i++) { const colPoints = []; for (let j = 0; j < rows; j++) { colPoints.push(state.gridPoints[i * rows + j]); } if (colPoints.length > 0) { ctx.moveTo(colPoints[0].x, colPoints[0].y); for (let k = 0; k < colPoints.length - 1; k++) { const xc = (colPoints[k].x + colPoints[k+1].x) / 2; const yc = (colPoints[k].y + colPoints[k+1].y) / 2; ctx.quadraticCurveTo(colPoints[k].x, colPoints[k].y, xc, yc); } } } ctx.stroke(); // --- 绘制：中心天体 (质量源) --- if (state.massStrength > 1) { const radius = 20 + state.massStrength * 0.1 + Math.sin(state.frame * 0.05) * 2; // 外部光晕 const gradient = ctx.createRadialGradient(centerX, centerY, radius * 0.5, centerX, centerY, radius * 4); gradient.addColorStop(0, 'rgba(251, 191, 36, 0.8)'); // Amber center gradient.addColorStop(0.4, 'rgba(245, 158, 11, 0.2)'); gradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(centerX, centerY, radius * 4, 0, Math.PI * 2); ctx.fill(); // 核心实体 ctx.fillStyle = '#fbbf24'; ctx.shadowColor = '#f59e0b'; ctx.shadowBlur = 30; ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } // --- 物理 & 绘制：行星 (测地线演示) --- if (state.planet.active) { const p = state.planet; // 计算引力加速度 const dx = centerX - p.x; const dy = centerY - p.y; const distSq = dx*dx + dy*dy; const dist = Math.sqrt(distSq); const force = 3000 / distSq; // G*M simplified const ax = (dx / dist) * force; const ay = (dy / dist) * force; p.vx += ax; p.vy += ay; p.x += p.vx; p.y += p.vy; // 记录轨迹 p.trail.push({x: p.x, y: p.y}); if (p.trail.length > 150) p.trail.shift(); // 绘制轨迹 ctx.beginPath(); ctx.strokeStyle = '#10b981'; // Emerald ctx.lineWidth = 2; for (let i = 0; i < p.trail.length - 1; i++) { ctx.lineTo(p.trail[i].x, p.trail[i].y); } ctx.stroke(); // 绘制行星 ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.fill(); // 行星标签 ctx.fillStyle = '#10b981'; ctx.font = "12px sans-serif"; ctx.fillText("Probe (m)", p.x + 10, p.y - 10); } // --- 物理 & 绘制：光子 (引力透镜) --- if (state.phase === 3) { ctx.lineWidth = 2; ctx.lineCap = 'round'; for (let i = state.photons.length - 1; i >= 0; i--) { const ph = state.photons[i]; // 简单的欧拉积分 const dx = centerX - ph.x; const dy = centerY - ph.y; const distSq = dx*dx + dy*dy; const dist = Math.sqrt(distSq); // 光受到引力偏折 (虽然光没有质量，但在广义相对论中沿测地线运动) // 为了视觉效果夸大偏折 const force = 4000 / distSq; const ax = (dx / dist) * force; const ay = (dy / dist) * force; ph.vx += ax; ph.vy += ay; // 绘制光束片段 (拖尾效果) const prevX = ph.x; const prevY = ph.y; ph.x += ph.vx; ph.y += ph.vy; ph.life--; // 绘制 const alpha = Math.min(1, ph.life / 20); ctx.strokeStyle = `rgba(255, 255, 200, ${alpha})`; ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(ph.x, ph.y); ctx.stroke(); // 移除出界或消失的光子 if (ph.life <= 0 || ph.x > VIEW_WIDTH) { state.photons.splice(i, 1); } } } else { state.photons = []; } // --- UI层 --- // 文字淡入淡出逻辑 if (state.currentText) { state.textOpacity = Math.min(1, state.textOpacity + 0.02); } drawText(ctx, state.currentText, state.subText, state.textOpacity); // 技术参数覆盖层 (装饰) ctx.fillStyle = "rgba(56, 189, 248, 0.5)"; ctx.font = "10px monospace"; ctx.textAlign = "left"; ctx.fillText(`G-FIELD: ${state.massStrength.toFixed(1)} UNITS`, 20, VIEW_HEIGHT - 40); ctx.fillText(`METRIC TENSOR: PERTURBED`, 20, VIEW_HEIGHT - 25); ctx.fillText(`SIMULATION TIME: ${state.frame}`, 20, VIEW_HEIGHT - 10); // 请求下一帧 animationFrameId = requestAnimationFrame(render); }; // 启动动画 render(); // 清理函数 return () => { cancelAnimationFrame(animationFrameId); }; }, []); return (

); };