'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const ANIMATION_DURATION = 8000; // 8 seconds per loop export default function NewsIntroAnimation() { const [time, setTime] = useState(0); const requestRef = useRef(null); const startTimeRef = useRef(null); // Animation Loop const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // Loop the animation every 8 seconds const t = elapsed % ANIMATION_DURATION; setTime(t); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // --- Animation Logic --- // Phase timing const TRANSITION_START = 3500; // ms const TRANSITION_PEAK = 4000; // ms const TRANSITION_END = 4500; // ms const isPhase1 = time < TRANSITION_PEAK; // Calculate global rotation speed const rotation = (time / 2000) * Math.PI * 2; // --- Globe Wireframe Generation --- // Create latitude and longitude lines that rotate const globeLines = useMemo(() => { const lines = []; const radius = 120; const centerX = VIEW_WIDTH / 2; const centerY = VIEW_HEIGHT / 2 + 20; // Longitudes (vertical-ish ellipses) for (let i = 0; i < 8; i++) { const offset = (i * Math.PI) / 4; lines.push({ type: 'longitude', offset, rx: radius * Math.cos(offset), ry: radius }); } // Latitudes (horizontal rings) for (let i = 1; i < 5; i++) { const y = -radius + (i * (radius * 2)) / 5; const circleR = Math.sqrt(radius * radius - y * y); lines.push({ type: 'latitude', y, r: circleR }); } return { lines, centerX, centerY, radius }; }, []); // --- 3D Text "ANIMORA" Logic --- const animoraText = "ANIMORA".split(''); const letters3D = animoraText.map((char, i) => { const totalChars = animoraText.length; // Distribute letters in a circle const angleOffset = (i / totalChars) * Math.PI * 2; // Rotate the whole ring based on time const currentAngle = angleOffset - rotation; const ringRadius = 220; // 3D Projection Math // x = r * cos(theta) // z = r * sin(theta) const x = Math.cos(currentAngle) * ringRadius; const z = Math.sin(currentAngle) * ringRadius; // Perspective projection const perspective = 400; const scale = perspective / (perspective + z); // Things further away (positive z) are smaller const alpha = Math.max(0.1, (scale - 0.5) * 2); // Fade out back letters const x2d = VIEW_WIDTH / 2 + x * scale; const y2d = VIEW_HEIGHT / 2 + 20; // Center of globe return { char, x: x2d, y: y2d, scale, alpha, z }; }).sort((a, b) => b.z - a.z); // Sort by Z so front letters render last (on top) // --- Transition Flash Logic --- let flashOpacity = 0; if (time >= TRANSITION_START && time <= TRANSITION_END) { // Triangle wave for flash opacity (0 -> 1 -> 0) const progress = (time - TRANSITION_START) / (TRANSITION_END - TRANSITION_START); flashOpacity = 1 - Math.abs(progress * 2 - 1); } // --- Final Text "动画工作室" Logic --- // Appears after transition const showFinalText = time > TRANSITION_PEAK; const finalTextScale = showFinalText ? 1 + 0.5 * Math.exp(-(time - TRANSITION_PEAK) / 500) // Pop effect: Scale 1.5 -> 1.0 : 0; const finalTextOpacity = showFinalText ? Math.min(1, (time - TRANSITION_PEAK) / 500) : 0; // --- Background Moving Grid (News Floor Effect) --- const gridOffset = (time / 1000) * 50; return (

{/* Control Hint */}

CCTV STYLE INTRO | TIME: {(time / 1000).toFixed(1)}s

); }