```javascript import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // ----------------------------------------------------------------------------- // 配置常量 // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const COLORS = { bg: '#0f172a', // 深蓝灰背景 grid: '#1e293b', // 网格线 primary: '#06b6d4', // 青色 (Cyan) - 主科技色 secondary: '#8b5cf6',// 紫色 (Violet) - 辅助色 accent: '#f43f5e', // 玫红 (Rose) - 警告/高亮 text: '#e2e8f0', // 浅灰文本 dim: '#334155', // 暗淡填充 }; // ----------------------------------------------------------------------------- // 辅助函数 // ----------------------------------------------------------------------------- const random = (min, max) => Math.random() * (max - min) + min; const toRad = (deg) => (deg * Math.PI) / 180; // 缓动函数 const Easing = { easeOutCubic: (x) => 1 - Math.pow(1 - x, 3), easeInOutQuart: (x) => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2, elasticOut: (x) => { const c4 = (2 * Math.PI) / 3; return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1; } }; // ----------------------------------------------------------------------------- // 组件主体 // ----------------------------------------------------------------------------- export default function BrianLogoReveal() { // --------------------------------------------------------------------------- // 状态管理 // --------------------------------------------------------------------------- const [frame, setFrame] = useState(0); // 用于触发重绘的帧计数 const timeRef = useRef(0); // 持续时间 (ms) const startTimeRef = useRef(null); // 动画开始时间戳 const rafRef = useRef(null); // RAF 句柄 // 鼠标交互状态 (用于视差效果) const mouseRef = useRef({ x: WIDTH / 2, y: HEIGHT / 2 }); // --------------------------------------------------------------------------- // 数据初始化 (useMemo) // --------------------------------------------------------------------------- // 1. 粒子系统：背景浮动粒子 const particles = useMemo(() => { return Array.from({ length: 50 }).map(() => ({ x: random(0, WIDTH), y: random(0, HEIGHT), z: random(0.5, 2), // 深度因子，用于视差 r: random(1, 3), alpha: random(0.1, 0.4), vx: random(-0.2, 0.2), vy: random(-0.2, 0.2), color: Math.random() > 0.5 ? COLORS.primary : COLORS.secondary })); }, []); // 2. 字母路径 "Brian" (几何风格) // 对用户提供的路径进行了微调和标准化，以便更好地进行描边动画 const letterPaths = useMemo(() => { // 基础偏移量，让文字居中 const offsetX = 0; const offsetY = 0; // 路径数据 (相对坐标) const paths = [ // B { d: "M0,100 L0,0 L40,0 L60,20 L60,40 L40,50 L0,50 M40,50 L60,60 L60,90 L40,100 L0,100", id: 'B', len: 350 }, // r { d: "M80,100 L80,30 M80,50 L110,30", id: 'r', len: 120 }, // i { d: "M130,100 L130,30 M130,15 L130,0", id: 'i', len: 100 }, // 点变成短线 // a { d: "M190,50 L160,50 L160,100 L200,100 L200,50 L190,50", id: 'a', len: 180 }, // n { d: "M230,100 L230,30 L270,100 L270,30", id: 'n', len: 200 } // N 修正为标准 N 写法，或者保持用户的折线风格 ]; // 计算整体宽度用于居中 const totalWidth = 270; const totalHeight = 100; return { paths, totalWidth, totalHeight }; }, []); // 3. 装饰性 HUD 环形数据 const hudRings = useMemo(() => { return [ { r: 180, w: 1, dash: "5 5", speed: 0.0005, color: COLORS.grid }, { r: 220, w: 2, dash: "40 80", speed: -0.001, color: COLORS.secondary }, { r: 240, w: 1, dash: "2 2", speed: 0.0002, color: COLORS.primary }, ]; }, []); // --------------------------------------------------------------------------- // 动画循环 // --------------------------------------------------------------------------- useEffect(() => { const loop = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; timeRef.current = elapsed; // 强制 React 重绘 setFrame(prev => prev + 1); rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, []); // --------------------------------------------------------------------------- // 交互处理 // --------------------------------------------------------------------------- const handlePointerMove = useCallback((e) => { // 计算相对于中心的归一化坐标 (-1 到 1) const svg = e.currentTarget; const pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; const svgP = pt.matrixTransform(svg.getScreenCTM().inverse()); mouseRef.current = { x: svgP.x, y: svgP.y }; }, []); // --------------------------------------------------------------------------- // 渲染计算 (每帧) // --------------------------------------------------------------------------- const t = timeRef.current; // 阶段控制 // Phase 0: 0-1000ms (初始化/加载) // Phase 1: 1000-3000ms (Logo 描边) // Phase 2: 3000-4000ms (填充 & 闪光) // Phase 3: 4000ms+ (循环/悬浮) const p1 = Math.min(Math.max((t - 500) / 2500, 0), 1); // 描边进度 const p2 = Math.min(Math.max((t - 3000) / 1000, 0), 1); // 填充进度 const p3 = Math.min(Math.max((t - 4000) / 1000, 0), 1); // 稳定态 const strokeProgress = Easing.easeInOutQuart(p1); const fillOpacity = Easing.easeOutCubic(p2); // 故障效果 (Glitch) // 随机触发故障，或者在 Phase 2 开始时强制触发一次 const isGlitch = (t > 3000 && t < 3200) || (t > 4000 && Math.random() > 0.98); const glitchOffset = isGlitch ? random(-10, 10) : 0; const glitchScaleY = isGlitch ? random(0.8, 1.2) : 1; // 悬浮动画 (Breathing) const floatY = Math.sin(t / 1000) * 5; // 视差计算 const parallaxX = (mouseRef.current.x - WIDTH / 2) * 0.02; const parallaxY = (mouseRef.current.y - HEIGHT / 2) * 0.02; // 文字解码效果 (Chinese Text) const decodeText = (finalText, triggerTime) => { if (t < triggerTime) return ""; const progress = Math.min((t - triggerTime) / 1000, 1); const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789###$$$%%%"; let output = ""; const len = finalText.length; const revealIndex = Math.floor(progress * len); for (let i = 0; i < len; i++) { if (i < revealIndex) { output += finalText[i]; } else { output += chars[Math.floor(Math.random() * chars.length)]; } } return output; }; const subText = decodeText("系统身份确认：Brian", 1500); // --------------------------------------------------------------------------- // 渲染 JSX // --------------------------------------------------------------------------- return (

); } ```