```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Zap, Activity, Battery, Anchor, Search, Cpu, Wifi, AlertTriangle } from 'lucide-react'; // ---------------------------------------------------------------------- // Constants & Config // ---------------------------------------------------------------------- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const BG_COLOR = "#0f172a"; const ACCENT_COLOR = "#3b82f6"; const SENSOR_COLOR = "#a855f7"; const ALERT_COLOR = "#ef4444"; const SCENE_DURATION = 600; // Frames per scene (approx 10s at 60fps) const TOTAL_SCENES = 4; // ---------------------------------------------------------------------- // Helper: Math & Random // ---------------------------------------------------------------------- const randomRange = (min, max) => Math.random() * (max - min) + min; // Generate a smooth path for graphs const generateGraphPath = (points, width, height) => { if (points.length === 0) return ""; const stepX = width / (points.length - 1); let d = `M 0 ${height - points[0] * height}`; for (let i = 1; i < points.length; i++) { d += ` L ${i * stepX} ${height - points[i] * height}`; } return d; }; // ---------------------------------------------------------------------- // Component: RbSensorTechAnimation // ---------------------------------------------------------------------- export default function RbSensorTechAnimation() { // -------------------------------------------------------------------- // State & Refs // -------------------------------------------------------------------- // We use a single frame counter for the entire animation loop const [frame, setFrame] = useState(0); // Refs for animation loop management const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // Refs for scene logic (avoiding state updates for logic) const sceneStateRef = useRef({ currentScene: 0, sceneTimer: 0, particles: [], graphData: Array(50).fill(0.5) }); // -------------------------------------------------------------------- // Initialization (Memoized) // -------------------------------------------------------------------- const staticAssets = useMemo(() => { // Background Grid Lines const vLines = Array.from({ length: 20 }).map((_, i) => i * (VIEW_WIDTH / 20)); const hLines = Array.from({ length: 12 }).map((_, i) => i * (VIEW_HEIGHT / 12)); // Battery Cells for Scene 2 const batteryCells = Array.from({ length: 24 }).map((_, i) => ({ id: i, x: (i % 8) * 45, y: Math.floor(i / 8) * 60 })); return { vLines, hLines, batteryCells }; }, []); // Initialize Particles only once useMemo(() => { sceneStateRef.current.particles = Array.from({ length: 60 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, speedX: Math.random() * 0.5 - 0.25, speedY: Math.random() * 0.5 - 0.25, opacity: Math.random() * 0.5 + 0.1 })); }, []); // -------------------------------------------------------------------- // Animation Loop // -------------------------------------------------------------------- const animate = useCallback(() => { // 1. Update Global Frame setFrame(prev => prev + 1); // 2. Update Logic (Refs) const state = sceneStateRef.current; state.sceneTimer++; // Scene Transition Logic if (state.sceneTimer > SCENE_DURATION) { state.sceneTimer = 0; state.currentScene = (state.currentScene + 1) % TOTAL_SCENES; } // Update Particles state.particles.forEach(p => { p.x += p.speedX; p.y += p.speedY; if (p.x < 0) p.x = VIEW_WIDTH; if (p.x > VIEW_WIDTH) p.x = 0; if (p.y < 0) p.y = VIEW_HEIGHT; if (p.y > VIEW_HEIGHT) p.y = 0; }); // Update Simulated Graph Data const newVal = 0.5 + Math.sin(Date.now() * 0.005) * 0.3 + (Math.random() - 0.5) * 0.1; state.graphData.shift(); state.graphData.push(newVal); // Loop requestRef.current = requestAnimationFrame(animate); }, []); useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); // -------------------------------------------------------------------- // Render Helpers // -------------------------------------------------------------------- const { currentScene, sceneTimer, graphData } = sceneStateRef.current; const time = frame * 0.05; // Calculate opacity for smooth transitions (fade in/out 30 frames) const getSceneOpacity = (index) => { if (currentScene !== index) return 0; if (sceneTimer < 30) return sceneTimer / 30; if (sceneTimer > SCENE_DURATION - 30) return (SCENE_DURATION - sceneTimer) / 30; return 1; }; // -------------------------------------------------------------------- // Sub-Components (Inline for performance/simplicity in this file) // -------------------------------------------------------------------- // 1. Principle Scene (Atom) const renderPrinciple = () => { const opacity = getSceneOpacity(0); if (opacity <= 0) return null; return ( {/* Magnetic Field Waves */} {[-2, -1, 0, 1, 2].map(i => ( ))} {/* Atom Core */} {/* Electron Orbits */} {[0, 60, 120].map((deg, i) => ( ))} {/* Laser Pump */} PUMP LASER {/* Labels */} Rb 原子自旋极化原理高灵敏度磁共振监测 ); }; // 2. EV Battery Scene const renderEV = () => { const opacity = getSceneOpacity(1); if (opacity <= 0) return null; return ( {/* Car Outline */} {/* Wheels */} {/* Battery Pack */} {/* Cells inside */} {Array.from({length: 12}).map((_, i) => { const isFaulty = i === 7; return ( ); })} {/* Scanning Effect */} {/* Info Panel */} 新能源车电芯监测检测到热失控前兆 Cell #07: 磁场异常波动 (+0.04mT) ); }; // 3. Storage Station Scene const renderStorage = () => { const opacity = getSceneOpacity(2); if (opacity <= 0) return null; return ( {/* Rack Container */} {/* Battery Modules */} {staticAssets.batteryCells.map((cell) => ( ))} {/* Data Visualization */} 储能电站运行监测

{/* This is SVG, so we use g/text */}

SYSTEM STATUS OPTIMAL MAGNETIC FLUX 42.5 µT ); }; // 4. Cable Scene (Split: Tunnel/Dog & Sea/Drone) const renderCable = () => { const opacity = getSceneOpacity(3); if (opacity <= 0) return null; // Split scene time: First half Tunnel, Second half Sea const isSea = sceneTimer > SCENE_DURATION / 2; return ( {/* Environment Background */} {/* Title */} {isSea ? "海底电缆巡检 (Drone)" : "隧道/地埋电缆巡检 (Robot Dog)"} {/* Common Cable Path */} {/* Fault Point */} 故障点定位 {/* Agents */} {!isSea ? ( // Robot Dog (Tunnel) {/* Dog Body */} {/* Head */} {/* Eye/Sensor */} {/* Legs (Animated) */} {/* Sensor Beam */} Rb Sensor Active ) : ( // Drone (Subsea) {/* Drone Body */} {/* Propellers */} {/* Sensor Array */} Sonar/Mag Scan )} ); }; // -------------------------------------------------------------------- // Main Render // -------------------------------------------------------------------- return (

{/* SVG Container */}

); } ```