```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; // ========================================== // 配置常量与工具函数 // ========================================== const VIEW_WIDTH = 1280; const VIEW_HEIGHT = 720; const FPS = 60; // 颜色定义 const COLORS = { bg: '#0f172a', // 墨蓝深底 wall: '#1e293b', wallHighlight: '#334155', ground: '#020617', operator: '#0f0f0f', // 哑光黑 gearHighlight: '#27272a', nvgLight: '#10b981', // 夜视仪绿/青 laser: '#ef4444', // 激光红 flashlight: 'rgba(220, 230, 255, 0.4)', // 冷白光 muzzleFlash: '#f59e0b', spark: '#fbbf24', text: '#64748b' }; const randomRange = (min, max) => Math.random() * (max - min) + min; // ========================================== // 主组件 // ========================================== export default function TacticalBreachAnimation() { // 核心动画状态：帧计数，用于驱动所有确定性动画 const [frame, setFrame] = useState(0); const requestRef = useRef(); // 动画阶段状态机 // 0-300: 潜行 (Stealth) // 300-400: 爆破前摇与慢动作 (Breach Slow-mo) // 400-600: 突入与清理 (Clear) const [phase, setPhase] = useState('STEALTH'); // 摄像机震动与偏移 const shakeRef = useRef({ x: 0, y: 0 }); // 粒子系统 (Ref保持跨帧数据) const particlesRef = useRef( Array.from({ length: 50 }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, size: Math.random() * 2, opacity: Math.random() * 0.5 })) ); // 爆破碎片 const debrisRef = useRef([]); // 队员数据 (相对位置偏移) const operators = useMemo(() => [ { id: 1, offset: 0, role: 'Pointman' }, // 尖兵 { id: 2, offset: -120, role: 'Breacher' }, // 破门手 { id: 3, offset: -220, role: 'Medic' }, // 医疗/支援 { id: 4, offset: -320, role: 'Rear' }, // 后卫 ], []); // ========================================== // 动画循环逻辑 // ========================================== useEffect(() => { const animate = () => { setFrame(prev => { const nextFrame = prev + 1; // 阶段控制 if (nextFrame < 300) { if (phase !== 'STEALTH') setPhase('STEALTH'); } else if (nextFrame >= 300 && nextFrame < 380) { if (phase !== 'BREACH') setPhase('BREACH'); } else { if (phase !== 'CLEAR') setPhase('CLEAR'); } // 循环重置 if (nextFrame > 700) { // 重置逻辑 shakeRef.current = { x: 0, y: 0 }; debrisRef.current = []; return 0; } return nextFrame; }); // 粒子更新逻辑 (不触发重绘，仅更新Ref数据供渲染读取) particlesRef.current.forEach(p => { p.x += p.vx; p.y += p.vy; if (p.x < 0) p.x = VIEW_WIDTH; if (p.x > VIEW_WIDTH) p.x = 0; }); // 爆破碎片逻辑 if (frame === 300) { // 初始化爆炸碎片 debrisRef.current = Array.from({ length: 30 }, () => ({ x: 850, y: 350, vx: (Math.random() - 0.8) * 15, // 向左喷射 vy: (Math.random() - 0.5) * 15, rot: Math.random() * 360, vRot: (Math.random() - 0.5) * 20, size: randomRange(5, 20) })); } if (debrisRef.current.length > 0) { debrisRef.current.forEach(d => { d.x += d.vx * (phase === 'BREACH' ? 0.2 : 1.0); // 慢动作 d.y += d.vy * (phase === 'BREACH' ? 0.2 : 1.0); d.rot += d.vRot; d.vy += 0.5; // 重力 }); } // 摄像机震动计算 if (frame >= 300 && frame < 320) { // 爆炸强震 shakeRef.current = { x: (Math.random() - 0.5) * 40, y: (Math.random() - 0.5) * 40 }; } else if (phase === 'CLEAR') { // 跑动轻微震动 shakeRef.current = { x: (Math.random() - 0.5) * 5, y: (Math.random() - 0.5) * 5 }; } else { // 呼吸感 shakeRef.current = { x: Math.sin(frame * 0.02) * 2, y: Math.cos(frame * 0.02) * 2 }; } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [phase, frame]); // 依赖 frame 确保逻辑更新，但在真实高性能场景通常剥离 setFrame // ========================================== // 渲染计算辅助 // ========================================== // 计算队伍整体位移 const getTeamX = () => { if (phase === 'STEALTH') return Math.min(600, frame * 2); // 缓慢前进 if (phase === 'BREACH') return 600; // 停下爆破 if (phase === 'CLEAR') return 600 + (frame - 380) * 12; // 快速突入 return 0; }; const teamBaseX = getTeamX(); // 渲染单个特战队员 const renderOperator = (op, index) => { // 步行姿态计算 (Bobbing) const walkCycle = Math.sin(frame * 0.15 + index); const bobY = phase === 'BREACH' ? 0 : (phase === 'CLEAR' ? Math.sin(frame * 0.8 + index) * 5 : walkCycle * 2); // 基础坐标 const x = teamBaseX + op.offset; const y = 400 + bobY; // 腿部动画 (简易模拟) const legOffset = phase === 'BREACH' ? 0 : Math.sin(frame * (phase === 'CLEAR' ? 0.8 : 0.2) + index) * 15; // 枪口方向 let gunAngle = 0; if (phase === 'STEALTH') gunAngle = 5; // 略微向下 if (phase === 'BREACH' && index === 1) gunAngle = -10; // 破门手准备 if (phase === 'CLEAR') gunAngle = Math.sin(frame * 0.5) * 10 - 5; // 搜索摆动 // 枪口闪光逻辑 const showMuzzleFlash = phase === 'CLEAR' && Math.random() > 0.85; return ( {/* 阴影 */} {/* 后腿 */} {/* 前腿 */} {/* 躯干 (战术背心) */} {/* 背心细节 */} {/* 头部 & 头盔 */} {/* 头盔主体 */} {/* 护目镜/面罩 */} {/* GPNVG-18 四目夜视仪 (标志性细节) */} {/* 支架 */} {/* 四个镜头管 */} {/* 镜头微光 (Glowing) */} {/* 手臂与武器 */} {/* 手臂 */} {/* 步枪主体 */} {/* 弹匣 */} {/* 枪管 */} {/* 战术手电 (仅领头队员开启) */} {index === 0 && phase !== 'BREACH' && ( {/* 丁达尔效应光锥 */} )} {/* 激光指示器 */} {(phase === 'CLEAR' || phase === 'STEALTH') && ( )} {/* 枪口火光 */} {showMuzzleFlash && ( )} ); }; return (

); } ```