```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // 常量与类型定义 // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const GROUND_Y = 320; const PIPE_Y = 420; const PIPE_HEIGHT = 60; const GATE_X = 650; const TRAP_X = 350; // 沉井位置 type Phase = 'DRAINAGE' | 'RIVER_RISING' | 'DEFENSE' | 'RECEDING'; interface Particle { id: number; x: number; y: number; vx: number; vy: number; life: number; type: 'rain' | 'flow' | 'sediment'; } // ----------------------------------------------------------------------------- // 辅助函数：生成波浪路径 // ----------------------------------------------------------------------------- const generateWavePath = ( xStart: number, xEnd: number, yBase: number, amplitude: number, frequency: number, offset: number, closeBottom: boolean = true ) => { let path = `M ${xStart} ${yBase}`; const steps = 40; const width = xEnd - xStart; for (let i = 0; i <= steps; i++) { const x = xStart + (width * i) / steps; const y = yBase + Math.sin((i / steps) * frequency * Math.PI * 2 + offset) * amplitude; path += ` L ${x} ${y}`; } if (closeBottom) { path += ` L ${xEnd} ${VIEW_HEIGHT} L ${xStart} ${VIEW_HEIGHT} Z`; } else { path += ` L ${xEnd} ${yBase + 200} L ${xStart} ${yBase + 200} Z`; // 简单的闭合用于填充 } return path; }; // ----------------------------------------------------------------------------- // 主组件 // ----------------------------------------------------------------------------- export default function FushougouTechAnimation() { // --------------------------------------------------------------------------- // 状态管理 // --------------------------------------------------------------------------- const [phase, setPhase] = useState('DRAINAGE'); const [time, setTime] = useState(0); // 物理模拟数值 const [cityWaterLevel, setCityWaterLevel] = useState(20); // 管道内水位 (0-60) const [riverWaterLevel, setRiverWaterLevel] = useState(10); // 江水水位 (相对PIPE_Y底部的偏移) const [gateAngle, setGateAngle] = useState(30); // 0 = closed, 45 = fully open // 粒子系统 const [particles, setParticles] = useState([]); const reqRef = useRef(); const lastTimeRef = useRef(0); // --------------------------------------------------------------------------- // 动画循环逻辑 // --------------------------------------------------------------------------- const animate = (timestamp: number) => { if (!lastTimeRef.current) lastTimeRef.current = timestamp; const dt = timestamp - lastTimeRef.current; lastTimeRef.current = timestamp; // 全局时间 (用于波浪相位) const t = timestamp * 0.002; setTime(t); // 状态机循环 (16秒为一个完整周期) const cycleTime = timestamp % 16000; let currentPhase: Phase = 'DRAINAGE'; if (cycleTime < 6000) { currentPhase = 'DRAINAGE'; // 阶段1：雨天排水 // 城市水位波动上涨，江水低，闸门开 setCityWaterLevel(prev => Math.min(45, prev + (Math.sin(t) * 0.1 + 0.05))); setRiverWaterLevel(prev => prev * 0.95 + 10 * 0.05); // 物理计算闸门角度: 取决于 (内压 - 外压) const targetAngle = 35 + Math.sin(t * 2) * 5; setGateAngle(prev => prev * 0.9 + targetAngle * 0.1); } else if (cycleTime < 9000) { currentPhase = 'RIVER_RISING'; // 阶段2：江水暴涨 setCityWaterLevel(prev => Math.max(20, prev - 0.1)); // 雨停，水位稍降 setRiverWaterLevel(prev => Math.min(120, prev + 0.8)); // 江水猛涨 // 闸门开始受压减小角度 const pressureDiff = cityWaterLevel - (riverWaterLevel - 20); // 简单模拟压力差 const targetAngle = pressureDiff > 0 ? 20 : 0; setGateAngle(prev => Math.max(0, prev * 0.9 + targetAngle * 0.1)); } else if (cycleTime < 13000) { currentPhase = 'DEFENSE'; // 阶段3：防倒灌 (闸门紧闭) setRiverWaterLevel(prev => Math.min(130, prev + 0.1)); setGateAngle(prev => prev * 0.8); // 逼近0度 // 城市水位因无法排出稍微积蓄 setCityWaterLevel(prev => Math.min(50, prev + 0.02)); } else { currentPhase = 'RECEDING'; // 阶段4：退水 setRiverWaterLevel(prev => prev * 0.9 + 10 * 0.1); setCityWaterLevel(prev => prev * 0.95 + 20 * 0.05); // 水退了，如果有内压，闸门会再次打开 const targetAngle = riverWaterLevel < 30 ? 30 : 0; setGateAngle(prev => prev * 0.9 + targetAngle * 0.1); } setPhase(currentPhase); // ------------------------------------------------------------------------- // 粒子系统更新 // ------------------------------------------------------------------------- setParticles(prev => { const nextParticles: Particle[] = []; // 1. 生成新粒子 // 雨滴 (仅在排水阶段) if (currentPhase === 'DRAINAGE' && Math.random() > 0.6) { nextParticles.push({ id: Math.random(), x: 50 + Math.random() * 300, y: 0, vx: 0, vy: 8 + Math.random() * 4, life: 100, type: 'rain' }); } // 管道内的水流粒子 (模拟流速) if (currentPhase === 'DRAINAGE' && Math.random() > 0.8) { nextParticles.push({ id: Math.random(), x: 0, y: PIPE_Y + 10 + Math.random() * 30, vx: 3 + Math.random() * 2, vy: 0, life: 200, type: 'flow' }); } // 沉井中的泥沙 (演示福寿沟的自净/沉淀功能) if (currentPhase === 'DRAINAGE' && Math.random() > 0.95) { nextParticles.push({ id: Math.random(), x: 0, y: PIPE_Y + 40, vx: 2, vy: 0.5, life: 300, type: 'sediment' }); } // 2. 更新现有粒子 prev.forEach(p => { let { x, y, vx, vy, life, type } = p; if (type === 'rain') { y += vy; if (y > GROUND_Y) life = 0; // 落地消失 } else if (type === 'flow') { x += vx; // 遇到沉井稍微下沉 if (x > TRAP_X - 20 && x < TRAP_X + 20) y += 0.5; // 出去 if (x > GATE_X) { // 如果闸门关了，粒子消失或反弹(简化为消失) if (gateAngle < 5) life = 0; else { x += vx; y += 1; } // 流入江中 } } else if (type === 'sediment') { x += vx; // 沉入沉井 if (x > TRAP_X - 10 && x < TRAP_X + 10) { vx *= 0.5; // 减速 y += 1; if (y > PIPE_Y + PIPE_HEIGHT + 20) { vx = 0; vy = 0; // 沉底 } } // 坡度冲刷逻辑：如果水流够快(DRAINAGE)，部分泥沙会被带走 if (currentPhase === 'DRAINAGE' && y < PIPE_Y + PIPE_HEIGHT + 10) { vx += 0.05; } } life--; if (life > 0 && x < VIEW_WIDTH && y < VIEW_HEIGHT) { nextParticles.push({ ...p, x, y, vx, vy, life }); } }); return nextParticles; }); reqRef.current = requestAnimationFrame(animate); }; useEffect(() => { reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current!); }, []); // --------------------------------------------------------------------------- // 渲染计算 // --------------------------------------------------------------------------- // 江水波浪 const riverHeight = PIPE_Y + PIPE_HEIGHT - riverWaterLevel; const riverPath = useMemo(() => generateWavePath(GATE_X + 10, VIEW_WIDTH, riverHeight, 5, 4, time), [riverHeight, time]); // 管道内水体 const pipeWaterHeight = PIPE_Y + PIPE_HEIGHT - cityWaterLevel; // 如果闸门关闭，水只在闸门左侧 const pipeWaterEnd = gateAngle < 5 ? GATE_X : VIEW_WIDTH; const pipeWaterPath = `M 0 ${pipeWaterHeight} L ${pipeWaterEnd} ${pipeWaterHeight + (gateAngle < 5 ? 0 : 20)} L ${pipeWaterEnd} ${PIPE_Y + PIPE_HEIGHT} L 0 ${PIPE_Y + PIPE_HEIGHT} Z`; // 状态文本与颜色 const getStatusConfig = () => { switch (phase) { case 'DRAINAGE': return { color: '#10b981', text: '正常排水 (DRAINAGE)', sub: '利用地势高差，城内积水自动排出' }; case 'RIVER_RISING': return { color: '#f59e0b', text: '江水上涨 (WARNING)', sub: '赣江水位上升，逼近排水口' }; case 'DEFENSE': return { color: '#ef4444', text: '自动闭合 (DEFENSE)', sub: '利用江水压力差，水窗自动关闭防倒灌' }; case 'RECEDING': return { color: '#3b82f6', text: '水位回落 (RECEDING)', sub: '江水退去，系统准备重启' }; } }; const status = getStatusConfig(); return (

{/* SVG 画布 */} {/* 装饰性边角 */}

); } ```