import React, { useState, useEffect, useRef, useMemo } from 'react'; export default function SolarSystemAnimation() { // ========================================== // 配置常量 // ========================================== const WIDTH = 1200; const HEIGHT = 700; const SUN_R = 50; const EARTH_R = 25; const MOON_R = 8; const ORBIT_A = 400; // 地球公转轨道长半轴 const ORBIT_B = 250; // 地球公转轨道短半轴 const MOON_ORBIT_R = 60; // 月球轨道半径 // 速度控制 (为了演示效果，速度非真实比例) const SPEED_EARTH_REV = 0.2; // 公转速度 const SPEED_EARTH_ROT = 6.0; // 自转速度 const SPEED_MOON_REV = 2.5; // 月球绕地速度 // ========================================== // 状态管理 // ========================================== const requestRef = useRef(null); const startTimeRef = useRef(null); // 使用 ref 存储动画状态以避免闭包陷阱，但为了触发重绘，我们需要一个简单的 state const [frameTick, setFrameTick] = useState(0); // 动画核心数据 (Ref 保持数据持久性) const animState = useRef({ time: 0, earthAngle: 0, // 弧度 moonAngle: 0, // 弧度 earthRot: 0, // 角度 0-360 }); // ========================================== // 初始化静态资源 (星星、SVG路径等) // ========================================== const stars = useMemo(() => { const arr = []; for (let i = 0; i < 200; i++) { arr.push({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.7 + 0.3, blinkSpeed: Math.random() * 2 + 1 }); } return arr; }, []); // 简化的“大陆”路径，用于地球表面纹理 const landPath = "M10,5 Q15,0 20,5 T30,10 T40,5 T50,15 T40,25 T30,20 T20,25 T10,20 T0,15 T10,5 M35,30 Q40,35 45,30 T55,35 T45,40 T35,35 T35,30"; // ========================================== // 动画循环 // ========================================== useEffect(() => { const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const progress = (timestamp - startTimeRef.current) / 1000; // 秒 // 更新状态 animState.current.time = progress; animState.current.earthAngle = (progress * SPEED_EARTH_REV) % (Math.PI * 2); animState.current.moonAngle = (progress * SPEED_MOON_REV) % (Math.PI * 2); animState.current.earthRot = (progress * SPEED_EARTH_ROT * 360) % 360; // 触发 React 渲染 setFrameTick(prev => prev + 1); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // ========================================== // 计算逻辑 (Render Phase) // ========================================== const { time, earthAngle, moonAngle, earthRot } = animState.current; // 1. 计算太阳 (中心) const sunX = WIDTH / 2; const sunY = HEIGHT / 2; // 太阳呼吸效果 const sunScale = 1 + 0.05 * Math.sin(time * 2); // 2. 计算地球位置 (椭圆轨道) const earthX = sunX + ORBIT_A * Math.cos(earthAngle); const earthY = sunY + ORBIT_B * Math.sin(earthAngle); // 3. 计算月球位置 (相对地球圆形轨道) const moonX = earthX + MOON_ORBIT_R * Math.cos(moonAngle); const moonY = earthY + MOON_ORBIT_R * Math.sin(moonAngle); // 4. 阴影角度计算 (关键：阴影始终背对太阳) // 向量 Sun -> Earth const vecSE_x = earthX - sunX; const vecSE_y = earthY - sunY; // 阴影旋转角度 (弧度 -> 角度) const earthShadowRot = Math.atan2(vecSE_y, vecSE_x) * (180 / Math.PI); // 月球阴影同理 (近似认为光源来自无限远的太阳方向，或者直接用 Sun->Moon 向量) const vecSM_x = moonX - sunX; const vecSM_y = moonY - sunY; const moonShadowRot = Math.atan2(vecSM_y, vecSM_x) * (180 / Math.PI); // 5. 季节计算 // 假设上方 (y < sunY) 为远日点/近日点逻辑，这里简化为： // 屏幕坐标系 y 向下。 // earthAngle = 0 (右) -> 春分 // earthAngle = PI/2 (下) -> 夏至 (北半球倾向太阳，假设倾角逻辑) // earthAngle = PI (左) -> 秋分 // earthAngle = 3PI/2 (上) -> 冬至 // 为了视觉效果，我们根据 Y 轴位置改变陆地颜色 (模拟雪/绿地) // sin(earthAngle) 在 -1 (上/冬) 到 1 (下/夏) 之间 const seasonFactor = Math.sin(earthAngle); // 颜色插值: -1(白) -> 0(绿) -> 1(深绿) const getLandColor = (factor) => { // 简单插值逻辑 if (factor < -0.5) return "#e2e8f0"; // 冬 (霜雪) if (factor < 0) return "#86efac"; // 春 (嫩绿) if (factor < 0.5) return "#10b981"; // 夏 (翠绿) return "#d97706"; // 秋 (枯黄) }; const landColor = getLandColor(seasonFactor); // 季节标签 let seasonLabel = ""; const deg = (earthAngle * 180 / Math.PI) % 360; const normDeg = deg < 0 ? deg + 360 : deg; // 0-360 // 判定区间 if (normDeg >= 315 || normDeg < 45) seasonLabel = "春分 (Vernal Equinox)"; else if (normDeg >= 45 && normDeg < 135) seasonLabel = "夏至 (Summer Solstice)"; else if (normDeg >= 135 && normDeg < 225) seasonLabel = "秋分 (Autumnal Equinox)"; else seasonLabel = "冬至 (Winter Solstice)"; return (

); }