'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const SUN_RADIUS = 60; const EARTH_RADIUS = 30; const MOON_RADIUS = 12; const MOON_ORBIT_RADIUS = 200; export default function SolarEclipseView() { // 静态资源：星星背景 const stars = useMemo(() => { return Array.from({ length: 150 }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.7 + 0.3, })); }, []); // 动画 Refs (避免 State 更新触发重绘) const moonRef = useRef(null); const umbraRef = useRef(null); // 本影 const penumbraRef = useRef(null); // 半影 const earthViewMoonRef = useRef(null); // 地球视角中的月亮 const infoTextRef = useRef(null); // 状态文本 const frameRef = useRef(0); const timeRef = useRef(0); // 坐标定义 const sunPos = { x: 100, y: VIEW_HEIGHT / 2 }; const earthPos = { x: 800, y: VIEW_HEIGHT / 2 }; useEffect(() => { let animationFrameId; const animate = () => { // 时间步进 timeRef.current += 0.005; // 计算月球位置 (围绕地球公转) // 使用正弦波调整Y轴，模拟轨道倾角，使其周期性对齐 const angle = timeRef.current; // 这里的轨道逻辑：让月球在地球左侧徘徊时产生日食 // 为了演示效果，我们让它在特定的椭圆轨道上运动 const orbitX = Math.cos(angle) * MOON_ORBIT_RADIUS; const orbitY = Math.sin(angle) * (MOON_ORBIT_RADIUS * 0.3); // 扁平椭圆 // 月球绝对坐标 const moonX = earthPos.x + orbitX; // 这里的加法实际上是向左（因为cos在PI附近是负数） const moonY = earthPos.y + orbitY; // 1. 更新月球位置 if (moonRef.current) { moonRef.current.setAttribute('cx', moonX); moonRef.current.setAttribute('cy', moonY); } // 2. 计算阴影几何 (仅当月球在太阳和地球之间时显示) // 简单的判断：月球X在太阳和地球之间 const isBetween = moonX > sunPos.x + SUN_RADIUS && moonX < earthPos.x; if (isBetween && umbraRef.current && penumbraRef.current) { // 向量计算 const dx = moonX - sunPos.x; const dy = moonY - sunPos.y; const dist = Math.sqrt(dx * dx + dy * dy); // 归一化向量 const nx = dx / dist; const ny = dy / dist; // 垂直向量 (用于计算切点) const px = -ny; const py = nx; // --- 本影 (Umbra) --- // 外切线原理：从太阳上边缘到月球上边缘，太阳下边缘到月球下边缘 // 延伸到地球表面 // 简化视觉效果：计算从月球背向太阳的锥体 // 相似三角形计算锥体尖端距离 // (Rs - Rm) / Dist = Rm / TipDist => TipDist = Rm * Dist / (Rs - Rm) const tipDist = (MOON_RADIUS * dist) / (SUN_RADIUS - MOON_RADIUS); const umbraTipX = moonX + nx * tipDist; const umbraTipY = moonY + ny * tipDist; // 构建本影路径：月球切点 -> 尖端 -> 闭合 // 月球切点 const mUx1 = moonX + px * MOON_RADIUS; const mUy1 = moonY + py * MOON_RADIUS; const mUx2 = moonX - px * MOON_RADIUS; const mUy2 = moonY - py * MOON_RADIUS; // 延伸本影到地球 (如果尖端在地球之后) // 这里的视觉效果：绘制一个长三角形 const umbraPath = `M ${mUx1} ${mUy1} L ${umbraTipX} ${umbraTipY} L ${mUx2} ${mUy2} Z`; umbraRef.current.setAttribute('d', umbraPath); umbraRef.current.setAttribute('opacity', 0.8); // --- 半影 (Penumbra) --- // 内切线原理：太阳上边缘 -> 月球下边缘 -> 延伸 // 这是一个梯形或发散的锥体 // 计算内切角度 const penumbraAngle = Math.atan2(SUN_RADIUS + MOON_RADIUS, dist); // 极坐标旋转生成点 const baseAngle = Math.atan2(dy, dx); // 延伸长度 (足够覆盖地球) const castLen = 400; // 上边缘射线 const pUpperAngle = baseAngle - 0.15; // 稍微夸张一点角度以获得更好的视觉效果 const pLx1 = moonX + Math.cos(pUpperAngle) * castLen; const pLy1 = moonY + Math.sin(pUpperAngle) * castLen; // 下边缘射线 const pLowerAngle = baseAngle + 0.15; const pLx2 = moonX + Math.cos(pLowerAngle) * castLen; const pLy2 = moonY + Math.sin(pLowerAngle) * castLen; const penumbraPath = `M ${moonX} ${moonY} L ${pLx1} ${pLy1} L ${pLx2} ${pLy2} Z`; penumbraRef.current.setAttribute('d', penumbraPath); penumbraRef.current.setAttribute('opacity', 0.3); // --- 计算地球视角的日食程度 --- // 投影到地球平面 (x = 800) // 简单的Y轴差值比对 const yDiff = Math.abs(moonY - sunPos.y); const maxEclipseDiff = 10; // 这里的阈值 let status = "无日食 (NO ECLIPSE)"; let eclipseColor = "#64748b"; // 更新地球视角中的月球位置 // 映射：diffY -> 视角中的偏移 if (earthViewMoonRef.current) { const viewScale = 3; // 放大倍数 const viewOffsetX = (moonX - (earthPos.x - MOON_ORBIT_RADIUS)) * 0.1; // 视差 const viewOffsetY = (moonY - sunPos.y) * viewScale; earthViewMoonRef.current.setAttribute('cx', 120 + viewOffsetX); // 120是ViewBox中的中心 earthViewMoonRef.current.setAttribute('cy', 80 + viewOffsetY); // 状态文字更新 if (moonX < earthPos.x && moonX > earthPos.x - 250) { if (yDiff < 2) { status = "日全食 (TOTAL ECLIPSE)"; eclipseColor = "#ef4444"; // Red alert } else if (yDiff < 25) { status = "日偏食 (PARTIAL ECLIPSE)"; eclipseColor = "#eab308"; // Warning } } if (infoTextRef.current) { infoTextRef.current.textContent = `STATUS: ${status}`; infoTextRef.current.setAttribute('fill', eclipseColor); } } } else { // 隐藏阴影 if (umbraRef.current) umbraRef.current.setAttribute('opacity', 0); if (penumbraRef.current) penumbraRef.current.setAttribute('opacity', 0); if (infoTextRef.current) { infoTextRef.current.textContent = "STATUS: 无日食 (NO ECLIPSE)"; infoTextRef.current.setAttribute('fill', "#64748b"); } // 重置地球视角 if (earthViewMoonRef.current) { earthViewMoonRef.current.setAttribute('cy', -100); // 移出视野 } } animationFrameId = requestAnimationFrame(animate); }; animate(); return () => { cancelAnimationFrame(animationFrameId); }; }, []); // 依赖为空，确保只启动一次 return (

); }