```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ----------------------------------------------------------------------------- // CONSTANTS & CONFIGURATION // ----------------------------------------------------------------------------- const PHASES = { SOIL: { id: 0, text: '虫卵随粪便排出，在土壤中休眠', duration: 3000 }, INGEST: { id: 1, text: '不洗手抓取食物，虫卵被吞下', duration: 2500 }, HATCH: { id: 2, text: '抵达肠道：虫卵孵化，幼虫破壳而出', duration: 2000 }, PENETRATE: { id: 3, text: '求生意志：穿透肠壁，进入静脉循环', duration: 2000 }, BLOOD: { id: 4, text: '随血流迁徙：经心脏泵入肺部', duration: 3000 }, LUNGS: { id: 5, text: '肺部停留：幼虫蜕皮发育，破坏肺泡', duration: 3000 }, TRACHEA: { id: 6, text: '逆流而上：沿气管爬回咽喉', duration: 2500 }, SWALLOW_AGAIN: { id: 7, text: '二进宫：再次被吞咽，重返消化道', duration: 2000 }, SETTLE: { id: 8, text: '定居：在小肠发育为成虫 (Ascaris lumbricoides)', duration: 4000 }, }; // Key coordinate points for the journey [x, y] const WAYPOINTS = { SOIL: [200, 560], HAND_LIFT: [300, 400], MOUTH: [500, 120], STOMACH: [500, 380], INTESTINE_WALL: [540, 420], // Penetration point VEIN_ENTRY: [600, 400], HEART: [500, 300], LUNG_R: [650, 220], TRACHEA_BASE: [500, 200], THROAT: [500, 140], INTESTINE_FINAL: [500, 460] }; // ----------------------------------------------------------------------------- // HELPER COMPONENTS // ----------------------------------------------------------------------------- // Organ Shape Component const Organ = ({ d, fill = "none", stroke = "#334155", strokeWidth = 2, glow = false, opacity = 1, className }) => ( ); // Particle (Blood/Dust) const Particle = ({ x, y, color, size }) => ( ); // ----------------------------------------------------------------------------- // MAIN COMPONENT // ----------------------------------------------------------------------------- export const InfectionCycleView = () => { const [phase, setPhase] = useState(PHASES.SOIL); const [progress, setProgress] = useState(0); // 0 to 1 within a phase const [pos, setPos] = useState(WAYPOINTS.SOIL); // Current worm position const [wormSize, setWormSize] = useState(1); const [wormWiggle, setWormWiggle] = useState(0); const animationRef = useRef(null); const startTimeRef = useRef(0); // Background particles (Soil & Blood) const soilParticles = useMemo(() => Array.from({ length: 30 }, (_, i) => ({ x: Math.random() * VIEW_WIDTH, y: 540 + Math.random() * 60, size: Math.random() * 2 + 1 })), []); const bloodParticles = useMemo(() => Array.from({ length: 15 }, (_, i) => ({ x: 450 + Math.random() * 100, y: 250 + Math.random() * 100, size: Math.random() * 2 + 1 })), []); // Linear Interpolation const lerp = (start, end, t) => { return start * (1 - t) + end * t; }; const lerpPos = (p1, p2, t) => { return [lerp(p1[0], p2[0], t), lerp(p1[1], p2[1], t)]; }; // Animation Loop useEffect(() => { const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // Global wiggle timer setWormWiggle(timestamp / 100); // Phase Logic let currentPhaseDuration = phase.duration; let t = Math.min(elapsed / currentPhaseDuration, 1); setProgress(t); // Movement Logic based on Phase let newPos = pos; switch (phase.id) { case 0: // SOIL newPos = WAYPOINTS.SOIL; break; case 1: // INGEST (Soil -> Mouth) // Bezier curve simulation for hand lifting if (t < 0.5) { newPos = lerpPos(WAYPOINTS.SOIL, WAYPOINTS.HAND_LIFT, t * 2); } else { newPos = lerpPos(WAYPOINTS.HAND_LIFT, WAYPOINTS.MOUTH, (t - 0.5) * 2); } break; case 2: // HATCH (Mouth -> Stomach) newPos = lerpPos(WAYPOINTS.MOUTH, WAYPOINTS.STOMACH, t); setWormSize(1); // Egg size break; case 3: // PENETRATE (Stomach -> Vein) if (t < 0.3) { // HATCH EFFECT (Wait/Shake) newPos = WAYPOINTS.STOMACH; setWormSize(1 + Math.sin(timestamp/50) * 0.2); } else { // Move to wall setWormSize(1.5); // Larva newPos = lerpPos(WAYPOINTS.STOMACH, WAYPOINTS.VEIN_ENTRY, (t - 0.3) * 1.42); } break; case 4: // BLOOD (Vein -> Heart -> Lung) if (t < 0.5) { newPos = lerpPos(WAYPOINTS.VEIN_ENTRY, WAYPOINTS.HEART, t * 2); } else { newPos = lerpPos(WAYPOINTS.HEART, WAYPOINTS.LUNG_R, (t - 0.5) * 2); } break; case 5: // LUNGS (Stay & Grow slightly) newPos = [ WAYPOINTS.LUNG_R[0] + Math.sin(timestamp / 200) * 5, WAYPOINTS.LUNG_R[1] + Math.cos(timestamp / 300) * 5 ]; setWormSize(2); break; case 6: // TRACHEA (Lung -> Throat) if (t < 0.6) { newPos = lerpPos(WAYPOINTS.LUNG_R, WAYPOINTS.TRACHEA_BASE, t / 0.6); } else { newPos = lerpPos(WAYPOINTS.TRACHEA_BASE, WAYPOINTS.THROAT, (t - 0.6) / 0.4); } break; case 7: // SWALLOW AGAIN (Throat -> Stomach -> Intestine) if (t < 0.4) { newPos = lerpPos(WAYPOINTS.THROAT, WAYPOINTS.STOMACH, t / 0.4); } else { newPos = lerpPos(WAYPOINTS.STOMACH, WAYPOINTS.INTESTINE_FINAL, (t - 0.4) / 0.6); } break; case 8: // SETTLE (Grow) newPos = WAYPOINTS.INTESTINE_FINAL; setWormSize(2 + t * 4); // Grow big break; default: break; } setPos(newPos); // Phase Transition if (t >= 1) { const nextId = (phase.id + 1) % 9; const nextPhaseKey = Object.keys(PHASES).find(k => PHASES[k].id === nextId); setPhase(PHASES[nextPhaseKey]); startTimeRef.current = timestamp; } animationRef.current = requestAnimationFrame(animate); }; animationRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationRef.current); }, [phase, pos]); // --------------------------------------------------------------------------- // RENDER HELPERS // --------------------------------------------------------------------------- // Generate the visual representation of the worm/egg const renderEntity = () => { const isEgg = phase.id <= 2; const isLarva = phase.id > 2 && phase.id < 8; const isAdult = phase.id === 8; if (isEgg) { return ( ); } // Wriggling worm logic // Generate a simple sin-wave path for the worm body const length = isAdult ? 40 * wormSize : 15 * wormSize; const thickness = isAdult ? 6 : 3; // Create wiggle path let d = `M 0 0`; const segments = 5; for(let i=1; i<=segments; i++) { const x = (length / segments) * i; // Wiggle calculation const y = Math.sin(wormWiggle + i) * (isAdult ? 5 : 2); d += ` L ${x} ${y}`; } return ( {/* Glow effect */} {/* Core */} ); }; // --------------------------------------------------------------------------- // SVG PATHS FOR ORGANS // --------------------------------------------------------------------------- // Simplified schematic paths const esophagusPath = "M 490 120 Q 495 140 490 380"; // Left wall const esophagusPathR = "M 510 120 Q 505 140 510 380"; // Right wall const stomachPath = "M 490 380 C 450 390 450 450 500 450 C 550 450 550 390 510 380"; const intestinePath = "M 500 450 C 450 470 450 520 500 520 C 550 520 550 470 500 450"; const lungLeft = "M 420 200 C 380 150 320 180 320 250 C 320 320 380 320 420 280 Z"; const lungRight = "M 580 200 C 620 150 680 180 680 250 C 680 320 620 320 580 280 Z"; const heartPath = "M 500 280 L 480 300 L 500 330 L 520 300 Z"; const vascularPath = "M 520 300 C 550 300 580 350 600 400"; // Heart to Gut area const vascularLungPath = "M 520 300 C 540 280 560 250 580 240"; // Heart to Lung const tracheaPath = "M 500 200 L 500 140"; // Lung connection to throat return (

{/* SVG SCENE */} {/* Decorative CSS overlays */}

); }; ```