'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // 视图常量 const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 800; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 行星配置数据 const PLANETS_DATA = [ { name: "水星", en: "Mercury", color: "#A5A5A5", size: 6, orbitX: 70, orbitY: 60, speed: 2.5, type: 'rock' }, { name: "金星", en: "Venus", color: "#E3BB76", size: 10, orbitX: 110, orbitY: 95, speed: 1.8, type: 'rock' }, { name: "地球", en: "Earth", color: "#3B82F6", size: 11, orbitX: 160, orbitY: 135, speed: 1.2, hasMoon: true, type: 'rock' }, { name: "火星", en: "Mars", color: "#EF4444", size: 8, orbitX: 210, orbitY: 175, speed: 0.9, type: 'rock' }, { name: "木星", en: "Jupiter", color: "#D97706", size: 28, orbitX: 300, orbitY: 240, speed: 0.5, type: 'gas' }, { name: "土星", en: "Saturn", color: "#FCD34D", size: 24, orbitX: 390, orbitY: 300, speed: 0.35, hasRings: true, type: 'gas' }, { name: "天王星", en: "Uranus", color: "#22D3EE", size: 16, orbitX: 470, orbitY: 350, speed: 0.2, type: 'ice' }, { name: "海王星", en: "Neptune", color: "#3B82F6", size: 15, orbitX: 540, orbitY: 390, speed: 0.1, type: 'ice' }, ]; // 随机生成星星背景 const StarField = () => { const stars = useMemo(() => { return Array.from({ length: 200 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5, opacity: Math.random() * 0.7 + 0.3, blinkSpeed: Math.random() * 2 + 1 })); }, []); return ( {stars.map((star, i) => ( ))} ); }; export default function SolarSystemAnimation() { const [time, setTime] = useState(0); const requestRef = useRef(); // 动画循环 const animate = (t: number) => { // 时间增量控制整体速度 setTime(prev => prev + 0.05); requestRef.current = requestAnimationFrame(() => animate(t)); }; useEffect(() => { requestRef.current = requestAnimationFrame((t) => animate(t)); return () => cancelAnimationFrame(requestRef.current!); }, []); return (

); }