import React, { useState, useEffect, useRef, useMemo } from 'react'; // 配置常量 const VIEW_WIDTH = 1920; const VIEW_HEIGHT = 1080; const BG_COLOR = '#3b3b3b'; // 管线类型定义 const PIPELINE_TYPES = { ELECTRICITY: { id: 'elec', label: '电力管网', color: '#00ffff', speed: 20 }, // 青色/快 GAS: { id: 'gas', label: '燃气管网', color: '#ffaa00', speed: 35 }, // 橙色/中 HEAT: { id: 'heat', label: '热力管网', color: '#ff3366', speed: 45 }, // 红色/慢 WATER: { id: 'water', label: '给排水网', color: '#0088ff', speed: 30 }, // 蓝色/中 }; // 工具函数：生成随机整数 const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; // 工具函数：生成正交路径 (Manhattan style) const generateOrthogonalPath = (x1, y1, x2, y2) => { // 简单的 L 型或 Z 型路径生成 const midX = x1 + (x2 - x1) * 0.5; // 路径指令：M x1 y1 -> L midX y1 -> L midX y2 -> L x2 y2 return `M ${x1} ${y1} L ${midX} ${y1} L ${midX} ${y2} L ${x2} ${y2}`; }; export const CityLifelineAnimation = () => { const [time, setTime] = useState(0); const requestRef = useRef(); // 1. 数据初始化 (只执行一次) const { gridLines, pipelines, nodes, particles } = useMemo(() => { const grid = []; const pipes = []; const hubs = []; const parts = []; // 生成背景网格 for (let x = 0; x <= VIEW_WIDTH; x += 100) { grid.push(`M ${x} 0 V ${VIEW_HEIGHT}`); } for (let y = 0; y <= VIEW_HEIGHT; y += 100) { grid.push(`M 0 ${y} H ${VIEW_WIDTH}`); } // 定义关键节点 (Hubs) const hubCount = 12; for (let i = 0; i < hubCount; i++) { hubs.push({ id: i, x: randomInt(200, VIEW_WIDTH - 200), y: randomInt(150, VIEW_HEIGHT - 150), type: Object.values(PIPELINE_TYPES)[i % 4] }); } // 生成连接管线 hubs.forEach((startNode, i) => { // 每个节点连接 2-3 个其他节点 const connections = randomInt(2, 3); for (let j = 0; j < connections; j++) { const targetIndex = (i + randomInt(1, 5)) % hubCount; const targetNode = hubs[targetIndex]; // 只有同类型或特定逻辑下连接 (这里为了视觉丰富，允许跨越，但颜色跟随源节点) const pathData = generateOrthogonalPath(startNode.x, startNode.y, targetNode.x, targetNode.y); const length = Math.abs(startNode.x - targetNode.x) + Math.abs(startNode.y - targetNode.y); pipes.push({ id: `pipe-${i}-${j}`, d: pathData, type: startNode.type, length: length }); } }); // 生成背景漂浮粒子 (装饰用) for(let i=0; i<30; i++) { parts.push({ x: randomInt(0, VIEW_WIDTH), y: randomInt(0, VIEW_HEIGHT), r: randomInt(1, 3), opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.5 + 0.1 }); } return { gridLines: grid, pipelines: pipes, nodes: hubs, particles: parts }; }, []); // 2. 动画循环 useEffect(() => { const animate = (t) => { // 降低更新频率，用于全局缓慢变化的效果，避免 React 渲染压力过大 // 这里主要用于更新一个全局 time 因子，驱动一些 subtle 效果 setTime(t / 1000); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 3. 计算扫描线位置 (基于 time) const scanLineY = (time * 150) % (VIEW_HEIGHT + 200); return (

{/* 注入 CSS 动画样式 */}

); };