'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 500; const TEXT = "SVGANIMATE"; const BG_COLOR = "#0f172a"; // Slate 900 const MARVEL_RED = "#ec1d24"; // Official Marvel Red const ACCENT_CYAN = "#06b6d4"; // Cyan for tech feel // ----------------------- // 数据生成工具：模拟科技/漫画分镜 // ----------------------- const generateTechPanels = (count: number) => { return Array.from({ length: count }).map((_, i) => { // 每个分镜包含一组随机的形状（模拟画面内容） const shapeCount = Math.floor(Math.random() * 8) + 4; const shapes = Array.from({ length: shapeCount }).map((__, j) => { const type = Math.random(); const x = Math.random() * VIEW_WIDTH; const y = Math.random() * 180; // Panel height approx // 1. 科技矩形块 if (type < 0.4) { return { type: 'rect', x, y, w: Math.random() * 150 + 20, h: Math.random() * 100 + 10, fill: Math.random() > 0.5 ? '#334155' : '#1e293b', stroke: Math.random() > 0.8 ? ACCENT_CYAN : 'none', }; } // 2. 模拟文本行 (代码/台词) else if (type < 0.7) { return { type: 'lines', x, y, w: Math.random() * 200 + 50, lines: Math.floor(Math.random() * 5) + 2, color: Math.random() > 0.5 ? '#94a3b8' : '#64748b' }; } // 3. 科技圆环/节点 else { return { type: 'circle', cx: x, cy: y, r: Math.random() * 30 + 5, stroke: '#475569', width: Math.random() * 2 + 1 }; } }); // 随机添加一些“专业术语” const terms = ["RENDER", "VECTOR", "PATH", "NODE", "CORE", "SYNC", "BUFFER", "HEX", "ALPHA"]; const label = Math.random() > 0.6 ? terms[Math.floor(Math.random() * terms.length)] : null; return { id: i, shapes, label }; }); }; export const MarvelTechIntro = () => { // 动画状态 const [offsetY, setOffsetY] = useState(0); const [phase, setPhase] = useState<'running' | 'slowing' | 'flash' | 'locked'>('running'); // 静态配置 const PANEL_HEIGHT = 200; const panelCount = 50; const panels = useMemo(() => generateTechPanels(panelCount), []); const TOTAL_HEIGHT = panelCount * PANEL_HEIGHT; // Refs for animation loop const requestRef = useRef(); const startTimeRef = useRef(); const speedRef = useRef(45); // 初始滚动速度 useEffect(() => { const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; if (elapsed < 3500) { // 阶段 1: 极速滚动 (Running) setOffsetY(prev => (prev + speedRef.current) % (TOTAL_HEIGHT - VIEW_HEIGHT)); // 加上轻微的随机抖动，模拟胶片/投影仪的不稳定性 if (Math.random() > 0.8) speedRef.current = 45 + Math.random() * 5; requestRef.current = requestAnimationFrame(animate); } else if (elapsed < 5000) { // 阶段 2: 减速 (Slowing) if (phase !== 'slowing') setPhase('slowing'); // 摩擦力减速 speedRef.current *= 0.92; setOffsetY(prev => { const next = prev + speedRef.current; // 确保不会超出边界 return next % (TOTAL_HEIGHT - VIEW_HEIGHT); }); requestRef.current = requestAnimationFrame(animate); } else if (elapsed < 5200) { // 阶段 3: 曝光闪烁 (Flash) if (phase !== 'flash') setPhase('flash'); requestRef.current = requestAnimationFrame(animate); } else { // 阶段 4: 锁定 (Locked) setPhase('locked'); } }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [TOTAL_HEIGHT, phase]); // 派生状态用于渲染控制 const isLocked = phase === 'locked'; const isFlash = phase === 'flash'; const showRedBox = phase === 'flash' || phase === 'locked'; return (

); };