'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 粒子系统配置 const PARTICLE_COUNT = 150; const FLOW_SPEED = 4; const PULSE_FREQUENCY = 0.05; // 脉冲频率 interface Particle { id: number; x: number; y: number; offsetY: number; // 初始Y轴偏移 speed: number; size: number; } export const HardAlloyResonantNozzle = () => { const [time, setTime] = useState(0); const reqRef = useRef(); // 动画循环 useEffect(() => { const animate = () => { setTime(t => t + 1); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current!); }, []); // 生成初始粒子 const particles = useMemo(() => { return Array.from({ length: PARTICLE_COUNT }).map((_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: 0, // 会动态计算 offsetY: (Math.random() - 0.5) * 40, // 流道宽度内的随机分布 speed: FLOW_SPEED + Math.random() * 2, size: 1.5 + Math.random() * 2, })); }, []); // 计算谐振腔内的压力波动 (用于视觉效果) const resonanceIntensity = (Math.sin(time * PULSE_FREQUENCY * 2) + 1) / 2; // 0 ~ 1 const isHighPressure = resonanceIntensity > 0.7; // 喷嘴几何参数 const nozzlePath = ` M 50,250 L 250,250 L 250,180 L 650,180 L 700,270 L 800,270 L 800,290 L 800,310 L 800,330 L 700,330 L 650,420 L 250,420 L 250,350 L 50,350 Z `; // 这是一个简化的腔体剖面：入口 -> 扩大的谐振腔 -> 收缩 -> 出口 // 内部流道遮罩路径 (用于限制粒子显示区域) const flowPathData = ` M 40,260 L 240,260 L 240,190 L 640,190 L 690,280 L 810,280 L 810,320 L 690,320 L 640,410 L 240,410 L 240,340 L 40,340 Z `; return ( ); };