'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const EARTH_RADIUS = 140; // 稍微调大一点，更有气势 const ORBIT_RADIUS = 240; // 3D 投影辅助函数 const project = (x: number, y: number, z: number) => { const fov = 600; const scale = fov / (fov + z); return { x: x * scale + VIEW_WIDTH / 2, y: y * scale + VIEW_HEIGHT / 2, scale: scale, z: z }; }; export default function NewsIntroAnimation() { // 动画阶段: 0: 旋转, 1: 对齐, 2: 翻转, 3: 完成 const [phase, setPhase] = useState(0); const [globalAngle, setGlobalAngle] = useState(0); const [flipProgress, setFlipProgress] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); const englishText = "ANIMORA"; const chineseText = "AI动画工作室"; // 生成背景星空 const stars = useMemo(() => { const starCount = 100; const arr = []; for (let i = 0; i < starCount; i++) { arr.push({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.8 + 0.2, blinkSpeed: Math.random() * 0.005 + 0.001 }); } return arr; }, []); // 生成地球经纬线 const gridLines = useMemo(() => { const lines = []; // 经线 (Longitudes) for (let i = 0; i < 12; i++) { const angle = (i * Math.PI) / 6; lines.push({ type: 'long', angle }); } // 纬线 (Latitudes) for (let i = 1; i < 6; i++) { const lat = (i * Math.PI) / 6 - Math.PI / 2; lines.push({ type: 'lat', lat }); } return lines; }, []); // 生成模拟陆地/城市的随机点 (增加细节感) const earthDots = useMemo(() => { const dots = []; const count = 80; for(let i=0; i { const animate = () => { const now = Date.now(); const elapsed = now - startTimeRef.current; if (phase === 0) { // 阶段 0: 持续旋转 let nextAngle = (elapsed * 0.0015) % (Math.PI * 2); setGlobalAngle(nextAngle); if (elapsed > 3500) { setPhase(1); } } else if (phase === 1) { // 阶段 1: 对齐到正面 (Target = Math.PI / 2) let current = globalAngle % (Math.PI * 2); const target = Math.PI / 2; let diff = target - current; if (diff < -Math.PI) diff += Math.PI * 2; if (diff > Math.PI) diff -= Math.PI * 2; if (Math.abs(diff) < 0.01) { setGlobalAngle(target); setPhase(2); startTimeRef.current = Date.now(); } else { setGlobalAngle(prev => prev + diff * 0.08); } } else if (phase === 2) { // 阶段 2: 文字翻转 const flipElapsed = Date.now() - startTimeRef.current; const duration = 800; const progress = Math.min(flipElapsed / duration, 1); setFlipProgress(progress); if (progress >= 1) { setPhase(3); } } else if (phase === 3) { // 阶段 3: 待机/呼吸效果 setGlobalAngle(Math.PI / 2 + Math.sin(Date.now() * 0.001) * 0.05); } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [phase, globalAngle]); // --- 渲染计算 --- // 地球自转角度 const earthRotation = phase === 3 ? (Date.now() * 0.0001) : (Date.now() * 0.0003); const tilt = 0.2; // 地轴倾角 (弧度) // 辅助：旋转并投影点 const transformAndProject = (x: number, y: number, z: number, rotation: number) => { // 1. 绕Y轴自转 const xRot = x * Math.cos(rotation) - z * Math.sin(rotation); const zRot = x * Math.sin(rotation) + z * Math.cos(rotation); // 2. 绕Z轴倾斜 (模拟地轴) const xFinal = xRot * Math.cos(tilt) - y * Math.sin(tilt); const yFinal = xRot * Math.sin(tilt) + y * Math.cos(tilt); const zFinal = zRot; return project(xFinal, yFinal, zFinal); }; // 渲染经纬线 const renderEarthLines = (isFront: boolean) => { return gridLines.map((line, idx) => { const points = []; const steps = 40; for (let j = 0; j <= steps; j++) { let x, y, z; if (line.type === 'long') { const phi = (j / steps) * Math.PI; const theta = line.angle; x = EARTH_RADIUS * Math.sin(phi) * Math.cos(theta); y = EARTH_RADIUS * Math.cos(phi); z = EARTH_RADIUS * Math.sin(phi) * Math.sin(theta); } else { const theta = (j / steps) * 2 * Math.PI; const lat = line.lat; const r = EARTH_RADIUS * Math.cos(lat); const yBase = EARTH_RADIUS * Math.sin(lat); x = r * Math.cos(theta); y = yBase; z = r * Math.sin(theta); } points.push(transformAndProject(x, y, z, earthRotation)); } let d = ""; let visiblePoints = 0; points.forEach((p, i) => { if ((isFront && p.z > -5) || (!isFront && p.z < 5)) { if (i === 0) d += `M ${p.x} ${p.y}`; else d += ` L ${p.x} ${p.y}`; visiblePoints++; } else { d += ` M ${p.x} ${p.y}`; } }); if (visiblePoints < 2) return null; return ( ); }); }; // 渲染地球表面的点 (模拟城市/数据节点) const renderEarthDots = (isFront: boolean) => { return earthDots.map((dot, i) => { const p = transformAndProject(dot.x, dot.y, dot.z, earthRotation); const visible = (isFront && p.z > -5) || (!isFront && p.z < 5); if (!visible) return null; return ( ); }); }; // 渲染环绕文字 const letters = englishText.split(''); const letterSpacingAngle = 0.25; const totalArc = (letters.length - 1) * letterSpacingAngle; const startOffset = -totalArc / 2; const renderLetters = (renderFront: boolean) => { if (phase >= 2 && !renderFront) return null; return letters.map((char, i) => { const offset = startOffset + i * letterSpacingAngle; const theta = globalAngle + offset; const x = ORBIT_RADIUS * Math.cos(theta); const z = ORBIT_RADIUS * Math.sin(theta); const y = Math.sin(theta * 3) * 15; // 稍微复杂的波浪 // 这里的投影不需要带地球倾角，保持轨道水平 const proj = project(x, y, z); const isFront = proj.z > 0; if (isFront !== renderFront) return null; if (phase >= 2) return null; return ( {char} ); }); }; // 渲染最终文字 (翻转效果) const renderFinalText = () => { if (phase < 2) return null; const theta = Math.PI / 2; const x = 0; const z = ORBIT_RADIUS; const proj = project(x, 0, z); let scaleX = 1; let currentText = englishText; let color = "#e2e8f0"; let fontSize = 36; let letterSpacing = "0.2em"; let shadow = "0px 0px 15px rgba(56, 189, 248, 0.6)"; let stroke = "none"; if (phase === 2) { if (flipProgress < 0.5) { scaleX = 1 - (flipProgress * 2); currentText = englishText; } else { scaleX = (flipProgress - 0.5) * 2; currentText = chineseText; color = "#ffffff"; fontSize = 52; letterSpacing = "0.05em"; shadow = "0px 0px 25px rgba(244, 63, 94, 0.6)"; // Reddish glow } } else { // Phase 3 scaleX = 1; currentText = chineseText; color = "#ffffff"; fontSize = 52; letterSpacing = "0.05em"; shadow = "0px 0px 30px rgba(244, 63, 94, 0.8)"; } return ( {/* 描边层，增加可读性 */} {currentText} {/* 发光层 */} = 2 && flipProgress >= 0.5 ? "#fb7185" : "#38bdf8"} // 切换颜色 fontSize={fontSize * proj.scale} fontWeight="900" letterSpacing={letterSpacing} style={{ textShadow: shadow }} > {currentText} ); }; return (

); }