```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 常量定义 const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const EARTH_X = 500; const EARTH_Y = 350; const ORBIT_RADIUS = 220; const MOON_RADIUS = 18; const EARTH_RADIUS = 40; // 农历关键节点 const KEY_DATES = [ { day: 1, label: '初一', name: '新月', en: 'New Moon' }, { day: 3, label: '初三', name: '蛾眉月', en: 'Waxing Crescent' }, { day: 7, label: '初七', name: '上弦月', en: 'First Quarter' }, { day: 15, label: '十五', name: '满月', en: 'Full Moon' }, { day: 18, label: '十八', name: '亏凸月', en: 'Waning Gibbous' }, { day: 22, label: '廿二', name: '下弦月', en: 'Last Quarter' }, { day: 27, label: '廿七', name: '残月', en: 'Waning Crescent' }, { day: 30, label: '三十', name: '新月', en: 'New Moon' }, ]; export default function MoonPhasePro() { // 核心状态：农历日期 (1.0 ~ 30.0) const [lunarDay, setLunarDay] = useState(1); const [isPlaying, setIsPlaying] = useState(true); const [isDragging, setIsDragging] = useState(false); const requestRef = useRef(); const previousTimeRef = useRef(); const speedRef = useRef(0.08); // 动画速度 // 动画循环 const animate = (time) => { if (previousTimeRef.current !== undefined) { const deltaTime = time - previousTimeRef.current; if (isPlaying && !isDragging) { setLunarDay((prevDay) => { // 30天为一个周期 let nextDay = prevDay + speedRef.current * (deltaTime / 16); if (nextDay > 30.5) nextDay = 0.5; // 循环 return nextDay; }); } } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [isPlaying, isDragging]); // 计算几何参数 const { moonX, moonY, angleRad, angleDeg, phaseParams } = useMemo(() => { // 将日期映射到弧度：初一(1) -> 0度(靠近太阳)，十五(15) -> 180度(背对太阳) // 修正：农历约29.53天，这里用30天模拟方便计算 // 角度定义：0度为右侧（太阳方向），逆时针旋转 const rad = ((lunarDay - 1) / 29.5) * 2 * Math.PI; // 屏幕坐标系中，Y轴向下。逆时针旋转需要 -sin const x = EARTH_X + ORBIT_RADIUS * Math.cos(rad); const y = EARTH_Y - ORBIT_RADIUS * Math.sin(rad); // 注意 SVG坐标系 // 角度 (0-360) let deg = (rad * 180) / Math.PI; deg = deg % 360; if (deg < 0) deg += 360; return { moonX: x, moonY: y, angleRad: rad, angleDeg: deg, phaseParams: { rad, deg } }; }, [lunarDay]); // 生成月相 SVG Path (地球视角) const getPhasePath = (day) => { const r = 40; // 显示半径 const cx = 0; const cy = 0; // 归一化角度 0 ~ 2PI const theta = ((day - 1) / 29.5) * 2 * Math.PI; // 计算光照分界线的X坐标投影 // 当 theta = 0 (新月), cos=1, 全黑? // 实际上： // 新月(0): 背光面朝向地球 -> 全黑 // 满月(PI): 受光面朝向地球 -> 全亮 // 这里的逻辑： // 我们看到的亮面比例取决于 (1 - cos(theta))/2 // 绘制逻辑： // 外圆：始终存在 // 阴影/亮部边界：是一个半椭圆 // 简化模拟： // 新月(Day 1) -> 全黑 // 上弦(Day 7.5) -> 右半亮 // 满月(Day 15) -> 全亮 // 下弦(Day 22.5) -> 左半亮 const isWaxing = day <= 15.8; // 渐盈 (初一到十五) const shadowX = r * Math.cos(theta); // 构建 Path // 起点：北极点 (0, -r) let d = `M ${cx} ${cy - r}`; if (isWaxing) { // 渐盈过程：右边亮 // 外弧：右半圆 d += ` A ${r} ${r} 0 0 1 ${cx} ${cy + r}`; // 内弧（晨昏线）：从南极点回到北极点 // 凸度方向取决于是否超过半月 (Day 7-8) const sweep = day > 8.5 ? 1 : 0; const rx = Math.abs(shadowX); d += ` A ${rx} ${r} 0 0 ${sweep} ${cx} ${cy - r}`; } else { // 渐亏过程：左边亮 // 外弧：左半圆 d += ` A ${r} ${r} 0 0 0 ${cx} ${cy + r}`; // 内弧 const sweep = day < 23.5 ? 0 : 1; const rx = Math.abs(shadowX); d += ` A ${rx} ${r} 0 0 ${sweep} ${cx} ${cy - r}`; } return d; }; // 生成背景星星 const stars = useMemo(() => Array.from({ length: 150 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.7 + 0.3, blink: Math.random() > 0.8 })), []); // 交互处理 const handleDateClick = (day) => { setIsPlaying(false); setLunarDay(day); }; const handleSliderChange = (e) => { setIsPlaying(false); setIsDragging(true); setLunarDay(parseFloat(e.target.value)); }; const handleSliderUp = () => { setIsDragging(false); }; return (

{/* 标题栏 */}

月相变化与月球什么运动有关

{/* 主可视化区域 */}

{/* 底部控制面板 (HTML覆盖层) */}

{/* 时间轴 Slider */}

DAY 1

{/* 轨道背景条 */}

{/* 输入控件 */} {/* 滑块指示器 (自定义样式) */}

DAY 30

{/* 按钮组 */}

{KEY_DATES.map((item) => { const isActive = Math.abs(lunarDay - item.day) < 0.6; return ( ); })}

{/* 总结文本 (用户指定位置) */}

总结：月相变化是由于月球围绕太阳公转形成的

); } ```