'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 辅助函数：角度转弧度 const toRad = (deg) => (deg * Math.PI) / 180; // 农历相位数据 const PHASES = [ { id: 0, name: '新月 (朔)', date: '农历初一', angle: 0, desc: '月球位于地球和太阳之间，暗面朝向地球。', english: 'New Moon' }, { id: 1, name: '上弦月', date: '农历初七', angle: 90, desc: '月球与太阳形成90度角，右半边亮。', english: 'First Quarter' }, { id: 2, name: '满月 (望)', date: '农历十五', angle: 180, desc: '地球位于月球和太阳之间，亮面朝向地球。', english: 'Full Moon' }, { id: 3, name: '下弦月', date: '农历廿二', angle: 270, desc: '月球运行至另一侧90度角，左半边亮。', english: 'Third Quarter' }, ]; export const MoonPhaseAnimation = () => { const [targetPhaseIdx, setTargetPhaseIdx] = useState(0); const [currentAngle, setCurrentAngle] = useState(0); const [isAutoPlaying, setIsAutoPlaying] = useState(true); // 动画循环引用 const requestRef = useRef(); const lastTimeRef = useRef(); const autoPlayTimerRef = useRef(); // 自动播放逻辑 useEffect(() => { if (isAutoPlaying) { autoPlayTimerRef.current = setInterval(() => { setTargetPhaseIdx((prev) => (prev + 1) % PHASES.length); }, 4000); // 每4秒切换一次 } return () => clearInterval(autoPlayTimerRef.current); }, [isAutoPlaying]); // 动画帧逻辑：平滑插值角度 const animate = (time) => { if (lastTimeRef.current !== undefined) { const targetAngle = PHASES[targetPhaseIdx].angle; // 处理 270 -> 0 的跨越问题 let effectiveTarget = targetAngle; let effectiveCurrent = currentAngle; // 简单的角度归一化逻辑，确保转动方向顺畅 if (effectiveCurrent > 270 && effectiveTarget === 0) effectiveTarget = 360; if (effectiveCurrent < 90 && effectiveTarget === 270) effectiveCurrent += 360; // 弹簧/Lerp 动画系数 const speed = 0.05; const diff = effectiveTarget - effectiveCurrent; if (Math.abs(diff) > 0.1) { let nextAngle = effectiveCurrent + diff * speed; if (nextAngle >= 360) nextAngle -= 360; setCurrentAngle(nextAngle); } else { setCurrentAngle(targetAngle); } } lastTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [targetPhaseIdx, currentAngle]); // 手动点击处理 const handlePhaseClick = (idx) => { setIsAutoPlaying(false); // 停止自动播放 setTargetPhaseIdx(idx); // 5秒后恢复自动播放 clearInterval(autoPlayTimerRef.current); setTimeout(() => setIsAutoPlaying(true), 8000); }; // 计算位置参数 const sunX = 100; const sunY = VIEW_HEIGHT / 2 + 50; const earthX = VIEW_WIDTH / 2; const earthY = VIEW_HEIGHT / 2 + 50; const orbitRadius = 220; // 月球在公转轨道上的位置 (注意：SVG坐标系Y轴向下，角度通常逆时针计算，这里为了视觉匹配需调整) // 0度(新月)应在地球左侧(靠近太阳)，180度(满月)在右侧 // 按照通常数学坐标，0度是右侧。我们需要修正角度偏移。 // 设定：太阳在左侧。 // 新月(0度)：月球在地球左侧。 rad = PI. // 但需求定义中，Angle是我们自定义的状态。我们映射一下： // 状态0 (新月) -> 视觉位置 180度 (左) // 状态90 (上弦) -> 视觉位置 90度 (下 - 俯视视角逆时针公转的话，应该是下方? 实际上公转是逆时针) // 让我们统一定义：俯视图，北极上空。公转逆时针。 // 太阳在左 (-X)。 // 新月: 月球在 (-R, 0)。 // 上弦: 月球在 (0, R)。(下侧) // 满月: 月球在 (R, 0)。 // 下弦: 月球在 (0, -R)。(上侧) // 映射 currentAngle 到几何角度 (rad) // currentAngle 0 => Math.PI // currentAngle 90 => Math.PI / 2 // currentAngle 180 => 0 // currentAngle 270 => 3 * Math.PI / 2 // 修正后的几何弧度 const geoRad = Math.PI - toRad(currentAngle); const moonX = earthX + orbitRadius * Math.cos(geoRad); const moonY = earthY - orbitRadius * Math.sin(geoRad); // SVG Y轴向下，sin取反 // 生成右上角月相视图的路径 const renderPhaseShape = (angle) => { const r = 50; // 半径 // 标准化角度到 0-360 const deg = angle % 360; // 创建遮罩或路径来模拟月相 // 简单模拟： // 0: 全黑 // 0-180: 右边亮 (Waxing) // 180-360: 左边亮 (Waning) // 亮面计算复杂，这里使用SVG Path拟合 // 视点是地球。 // 0度(新月): 看不到亮面。 // 90度: 右半边亮。 // 180度: 全亮。 // 270度: 左半边亮。 // 使用椭圆弧模拟明暗界线 (Terminator) // x = r * cos(theta) const isWaxing = deg <= 180; const illumination = Math.cos(toRad(deg)); // -1 (Full) to 1 (New) ... wait // New Moon (0 deg) -> Earth view sees dark side. Sun is behind moon. // Full Moon (180 deg) -> Earth view sees lit side. // 投影宽度 (-r 到 r) // 0deg -> 亮面宽度 0 // 90deg -> 亮面占一半 // 180deg -> 全亮 // 构造路径: // 外圈圆由两个圆弧组成。 // 晨昏线是一个半椭圆。 const sweep = isWaxing ? 1 : 0; // 弧的方向 const termX = -r * Math.cos(toRad(deg)); // 背景(暗部) // 亮部路径 if (Math.abs(deg - 0) < 1 || Math.abs(deg - 360) < 1) { return ; } if (Math.abs(deg - 180) < 1) { return ; } // 通用相位绘制 // 逻辑：画一个半圆(亮侧)，然后加/减一个半椭圆 // 上弦月(0-180): 右侧是亮边 (arc 0, -r to 0, r sweep 1) // 下弦月(180-360): 左侧是亮边 return ( {/* 底色：全黑 */} {/* 亮部逻辑 */} {/* 如果是凸月(Gibbous)，需要填充另一半 */} {(deg > 90 && deg < 270) && ( )} ); }; return ( ); }; export default MoonPhaseAnimation;