'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; export default function OccupationalHealthAnimation() { // Animation phases: // 0: Idle/Enter // 1: Scanning (X-Ray) // 2: Scan Success/Analysis // 3: Equipping (Mask + Helmet) // 4: Mining (Descent) const [phase, setPhase] = useState(0); const [scannerY, setScannerY] = useState(100); const [mineDepth, setMineDepth] = useState(0); // Ref for animation loop const frameRef = useRef(0); const startTimeRef = useRef(0); const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const BG_COLOR = "#e6e9ef"; const PRIMARY_COLOR = "#2563eb"; // Blue const SKELETON_COLOR = "#ffffff"; const SCAN_BEAM_COLOR = "rgba(100, 255, 218, 0.5)"; const MINE_WALL_COLOR = "#1f2937"; // Cycle the animation sequence useEffect(() => { let timeoutId; const sequence = async () => { // Phase 0: Reset/Idle setPhase(0); setScannerY(100); setMineDepth(0); await new Promise(r => setTimeout(r, 1000)); // Phase 1: Scanning setPhase(1); // Scanner moves via animation frame loop below, wait for duration await new Promise(r => setTimeout(r, 3000)); // Phase 2: Result setPhase(2); await new Promise(r => setTimeout(r, 2000)); // Phase 3: Equip setPhase(3); await new Promise(r => setTimeout(r, 2000)); // Phase 4: Mining Descent setPhase(4); await new Promise(r => setTimeout(r, 5000)); // Loop sequence(); }; sequence(); return () => clearTimeout(timeoutId); }, []); // Frame loop for smooth continuous animations (Scanner beam & Mine descent) useEffect(() => { let animationFrameId; const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; // Scanner Animation (Oscillate) if (phase === 1) { const elapsed = time - startTimeRef.current; // Move scanner between y=150 and y=300 const y = 150 + Math.sin(elapsed * 0.003) * 80; setScannerY(y); } else if (phase === 0) { setScannerY(100); } // Mine Descent Animation (Infinite Scroll) if (phase === 4) { setMineDepth(prev => (prev + 5) % 200); } animationFrameId = requestAnimationFrame(animate); }; animationFrameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationFrameId); }, [phase]); // -- Sub-Components -- // 1. The Character (Human) const Character = () => { // Breathing animation const [breath, setBreath] = useState(1); useEffect(() => { const interval = setInterval(() => { setBreath(b => b === 1 ? 1.02 : 1); }, 1500); return () => clearInterval(interval); }, []); const isScanning = phase === 1; const isEquipped = phase >= 3; const isMining = phase === 4; return ( {/* Body Outline */} {/* Head */} {/* Skin tone */} {/* Ribcage (Only visible during scan via mask/clip or if we toggle opacity) */} {/* We overlay the ribs and control opacity based on the scanner beam position in the main render, but here we place the geometry. */} {/* Lungs hint */} {/* Face Mask (N95) */} {/* Helmet */} {/* Lamp */} {/* Light Beam (Only in Mine) */} {isMining && ( )} ); }; // 2. Medical UI Overlay const MedicalUI = () => { if (phase > 2) return null; return ( {/* Grid Background */} {/* Scanner Frame */} {/* Scanning Beam */} {phase === 1 && ( )} {/* UI Text */} 职业健康检查 {phase === 0 ? "准备中..." : phase === 1 ? "胸部 CT 扫描" : "检查完成"} {phase === 1 ? "SCANNING LUNGS..." : phase === 2 ? "ANALYSIS COMPLETE" : "IDLE"} {/* Dynamic Heart rate */} {phase === 1 && ( )} {/* Success Stamp */} 体检合格 PASS ); }; // 3. Mining Environment const MineShaft = () => { if (phase < 3) return null; // Opacity transition for entering the mine const opacity = phase >= 3 ? 1 : 0; // Determine translation for the "elevator" effect // When phase is 4, we simulate movement by moving the walls up return ( {/* Dark overlay to simulate depth, slowly getting darker */} {/* Mine Walls */} {phase === 4 && ( {/* Left Wall */} {/* Right Wall */} {/* Dust Particles */} {Array.from({length: 10}).map((_, i) => ( ))} )} {/* Elevator Cage Lines */} {phase === 4 && ( {/* Cross bars moving up */} )} {/* Safety Text */} 安全第一下井作业中... {/* Phase 3 Text: Equipping */} {phase === 3 && ( 佩戴防护装备 )} ); }; return (

); }