```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 农历月相数据配置 const PHASES = [ { day: 1, name: '初一', label: '新月 (New Moon)', visible: 0 }, { day: 3, name: '初三', label: '蛾眉月 (Waxing Crescent)', visible: 0.15 }, { day: 7, name: '初七', label: '上弦月 (First Quarter)', visible: 0.5 }, { day: 15, name: '十五', label: '满月 (Full Moon)', visible: 1.0 }, { day: 22, name: '廿二', label: '下弦月 (Third Quarter)', visible: 0.5 }, { day: 27, name: '廿七', label: '残月 (Waning Crescent)', visible: 0.15 }, { day: 30, name: '三十', label: '晦月 (Dark Moon)', visible: 0 }, ]; // 生成随机星星 const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.7 + 0.3, blinkSpeed: Math.random() * 2 + 1, })); }; // 月球陨石坑数据 const CRATERS = [ { cx: -40, cy: -30, r: 15 }, { cx: 20, cy: 10, r: 25 }, { cx: 60, cy: -40, r: 10 }, { cx: -30, cy: 50, r: 18 }, { cx: 10, cy: -60, r: 12 }, { cx: 50, cy: 40, r: 8 }, { cx: -60, cy: 10, r: 14 }, { cx: 0, cy: 0, r: 5 }, ]; export const MoonPhasesAnimation = () => { const [currentPhaseIndex, setCurrentPhaseIndex] = useState(0); const [displayDay, setDisplayDay] = useState(1); const stars = useMemo(() => generateStars(150), []); const requestRef = useRef(); const startTimeRef = useRef(); // 自动轮播逻辑 useEffect(() => { const interval = setInterval(() => { setCurrentPhaseIndex((prev) => (prev + 1) % PHASES.length); }, 3000); // 每3秒切换一次月相 return () => clearInterval(interval); }, []); // 动画平滑过渡逻辑 useEffect(() => { const targetDay = PHASES[currentPhaseIndex].day; // 如果是从30跳回1，不做平滑过渡，直接重置，或者快速过渡 // 这里为了视觉效果，我们模拟连续性。 // 真实的月相是循环的，但这里是离散的点展示。 const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; setDisplayDay((prev) => { const diff = targetDay - prev; // 简单的缓动 if (Math.abs(diff) < 0.1) return targetDay; return prev + diff * 0.05; }); if (Math.abs(displayDay - targetDay) > 0.1) { requestRef.current = requestAnimationFrame(animate); } }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [currentPhaseIndex, displayDay]); // 计算月相遮罩路径 // 核心算法：通过贝塞尔曲线或椭圆弧模拟阴影边缘 const getPhasePath = (day) => { const r = 120; // 月球半径 const normalizedDay = day; // 1-30 // 将农历日期转换为 0 (初一) -> 0.5 (十五) -> 1 (三十) 的进度 // 实际上农历约29.5天，这里简化计算 let phaseProgress = (normalizedDay - 1) / 29.5; // 修正：初一(0) 全黑, 十五(0.5) 全亮, 三十(1) 全黑 // 我们需要绘制的是“亮部”的区域 // 这里的逻辑： // 创建一个覆盖全圆的路径，然后通过 path 裁剪出亮部 // 简化逻辑： // 使用 SVG mask。 // 黑色背景，白色圆形是月球底。 // 阴影是一个椭圆在移动。 // 计算光照方向 (1为满月，-1为新月) // 0-15天: 从右边亮起 (Waxing) // 15-30天: 从左边消退 (Waning) const isWaxing = normalizedDay <= 15; // 照亮比例 0 -> 1 -> 0 const illumination = 1 - Math.abs((normalizedDay - 15) / 14); // 阴影边缘的X坐标控制点 (-r 到 r) // 初一: -r (全黑), 初七: 0 (半圆), 十五: r (全亮) // 这里的映射是非线性的，近似 cos 曲线 const theta = ((normalizedDay - 1) / 29.5) * 2 * Math.PI; const xOffset = -r * Math.cos(theta); // 构建路径 // 外圆弧始终存在 (半圆) // 内边缘是椭圆弧，其X半径随相位变化 // 路径绘制亮部： if (normalizedDay === 1 || normalizedDay >= 30) { return ""; // 新月不画亮部 } if (Math.abs(normalizedDay - 15) < 0.5) { // 满月，画全圆 return `M 0, -${r} A ${r} ${r} 0 1 1 0 ${r} A ${r} ${r} 0 1 1 0 -${r}`; } // 通用情况 const outerArcFlag = isWaxing ? 1 : 0; // 1: 右半圆, 0: 左半圆 const sweepFlag = 1; // 起点：北极 (0, -r) // 终点：南极 (0, r) // 1. 绘制外边缘 (半圆) let d = `M 0, -${r} A ${r} ${r} 0 0 ${outerArcFlag} 0 ${r}`; // 2. 绘制晨昏线 (椭圆弧) 回到起点 // 晨昏线的弯曲方向取决于相位 // 如果是凸月(Gibbous)，晨昏线向暗部弯曲 // 如果是眉月(Crescent)，晨昏线向亮部弯曲 // 这里的数学几何稍微复杂，用简化的椭圆参数 // rx 随着 |xOffset| 变化 const rx = Math.abs(xOffset); // 确定晨昏线的旋转方向 (sweep flag) // 对于 Waxing (初1-15): // Crescent (1-7): xOffset < 0. 亮部在右，内弧向左弯 (sweep 0?) // Gibbous (7-15): xOffset > 0. 亮部在右，内弧向左弯 (sweep 1?) // 让我们用更直观的 Mask 方法： // 亮部由两个弧组成。 // 弧1: 半圆 (右半圆 for Waxing, 左半圆 for Waning) // 弧2: 半椭圆 (连接南北极) const isCrescent = illumination < 0.5; // 重新构建逻辑： // Waxing (右亮): // Path always starts top (0, -r) -> arc to bottom (0, r) via Right side. // Then curve back to top. // If Crescent: curve passes through positive X (cutting into the semicircle). // If Gibbous: curve passes through negative X (bulging out). // Waning (左亮): // Path starts top -> arc to bottom via Left side. // Then curve back to top. const sideArc = isWaxing ? `A ${r} ${r} 0 0 1 0 ${r}` // 右半圆 : `A ${r} ${r} 0 0 0 0 ${r}`; // 左半圆 const terminatorSweep = isWaxing ? 0 : 1; // 计算椭圆半径 // xOffset 从 -r 到 r. // 椭圆的rx = abs(xOffset). // 只有当 xOffset 符号变化时，sweep flag 才会影响凹凸 // 修正的逻辑： // 始终画一个半圆加上一个半椭圆 // 椭圆的 rx = r * cos(theta) // 使用 mask 可能是最稳定的 SVG 方式，避免复杂的路径计算 return null; // 这里返回 null 表示我们在 render 里用 mask 逻辑 }; const activePhase = PHASES[currentPhaseIndex]; const moonR = 120; // 计算当前用于 Mask 的参数 // 0 到 2PI const phaseAngle = ((displayDay - 1) / 29.5) * 2 * Math.PI; // x位移: -R 到 R const x = -moonR * Math.cos(phaseAngle); // 确定遮罩形状 // 我们使用一个白色底圆 (月亮) // 然后覆盖一个半透明黑色矩形 + 椭圆修正 // 或者： // 亮部 = 半圆 +/- 半椭圆 // 构造亮部路径 (Path String) const getLitPath = () => { // 满月特殊处理 if (Math.abs(displayDay - 15) < 0.5) return `M 0 -${moonR} A ${moonR} ${moonR} 0 1 1 0 ${moonR} A ${moonR} ${moonR} 0 1 1 0 -${moonR}`; // 新月特殊处理 if (displayDay < 1 || displayDay > 29) return ""; const isWaxing = displayDay <= 15; // 半圆部分： // Waxing: 右半圆 (Start 0,-R, Arc to 0,R sweep 1) // Waning: 左半圆 (Start 0,-R, Arc to 0,R sweep 0) const semiCircle = isWaxing ? `M 0 -${moonR} A ${moonR} ${moonR} 0 0 1 0 ${moonR}` : `M 0 -${moonR} A ${moonR} ${moonR} 0 0 0 0 ${moonR}`; // 椭圆部分 (Terminator)： // 从 (0, R) 回到 (0, -R) // 半径 rx = abs(x) // Sweep 取决于它是凸还是凹 // Waxing: // x < 0 (Crescent): 需切掉部分 -> sweep 1 (向右弯) -> Wait, path goes Bottom to Top. // x > 0 (Gibbous): 需增加部分 -> sweep 0 (向左弯) // 简化: // 椭圆总是通过 x 点 (-x, 0) ? No. // 让我们用简单的 SVG 缩放技巧。 // 画一个半圆，再画另一个半圆并缩放其 X 轴。 return null; }; return ( ); }; ```