```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; // ========================================== // CONFIG & DATA // ========================================== const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 800; const BG_COLOR = "#0f172a"; const CYCLE_DURATION = 18000; // 18 seconds for full journey // Stages definition const STAGES = [ { id: 'oral', label: '口腔 (Oral Cavity)', desc: '咀嚼与唾液混合', start: 0, end: 0.10, color: '#fca5a5' }, { id: 'pharynx', label: '咽 (Pharynx)', desc: '吞咽反射', start: 0.10, end: 0.15, color: '#fda4af' }, { id: 'esophagus', label: '食道 (Esophagus)', desc: '蠕动推送', start: 0.15, end: 0.25, color: '#f9a8d4' }, { id: 'stomach', label: '胃 (Stomach)', desc: '研磨与化学消化', start: 0.25, end: 0.45, color: '#fde047' }, { id: 'small_intestine', label: '小肠 (Small Intestine)', desc: '营养吸收与消化', start: 0.45, end: 0.75, color: '#86efac' }, { id: 'large_intestine', label: '大肠 (Large Intestine)', desc: '水分吸收与成形', start: 0.75, end: 0.95, color: '#d6d3d1' }, { id: 'rectum', label: '排出 (Excretion)', desc: '废物排出', start: 0.95, end: 1.0, color: '#9ca3af' }, ]; // Path Waypoints for the food journey (x, y) const WAYPOINTS = [ { x: 100, y: 150 }, // 0: Mouth start { x: 180, y: 150 }, // 1: Mouth end { x: 220, y: 180 }, // 2: Pharynx { x: 220, y: 350 }, // 3: Esophagus end { x: 250, y: 400 }, // 4: Stomach entry { x: 320, y: 450 }, // 5: Stomach bottom { x: 380, y: 400 }, // 6: Stomach exit / Duodenum { x: 420, y: 450 }, // 7: Small Intestine Start { x: 480, y: 550 }, // 8: SI loop 1 { x: 380, y: 600 }, // 9: SI loop 2 { x: 550, y: 600 }, // 10: SI loop 3 { x: 600, y: 500 }, // 11: SI End / Cecum { x: 650, y: 650 }, // 12: Cecum (Blind gut) { x: 650, y: 250 }, // 13: Ascending Colon Top { x: 350, y: 200 }, // 14: Transverse Colon Left { x: 100, y: 250 }, // 15: Descending Colon Top { x: 100, y: 600 }, // 16: Sigmoid Colon { x: 100, y: 750 }, // 17: Anus ]; // Map 0-1 progress to path coordinates const getPathPosition = (progress) => { const totalPoints = WAYPOINTS.length - 1; // Non-linear mapping to match stage duration let adjustedProgress = progress; // Find which segment we are in based on STAGES // This is a simplified mapping for smooth animation along the specific waypoints // We map the uniform time progress to the waypoint indices // Custom timing map to sync position with organ graphics let p = 0; if (progress < 0.10) p = 0 + (progress/0.10) * 1; // Mouth (0-1) else if (progress < 0.15) p = 1 + ((progress-0.10)/0.05) * 1; // Pharynx (1-2) else if (progress < 0.25) p = 2 + ((progress-0.15)/0.10) * 1; // Esophagus (2-3) else if (progress < 0.45) p = 3 + ((progress-0.25)/0.20) * 3; // Stomach (3-6) else if (progress < 0.75) p = 6 + ((progress-0.45)/0.30) * 5; // SI (6-11) else if (progress < 0.95) p = 11 + ((progress-0.75)/0.20) * 5; // LI (11-16) else p = 16 + ((progress-0.95)/0.05) * 1; // Exit (16-17) const idx = Math.floor(p); const nextIdx = Math.min(idx + 1, totalPoints); const segmentProgress = p - idx; const p1 = WAYPOINTS[idx]; const p2 = WAYPOINTS[nextIdx]; if (!p1 || !p2) return { x: 0, y: 0 }; return { x: p1.x + (p2.x - p1.x) * segmentProgress, y: p1.y + (p2.y - p1.y) * segmentProgress }; }; // ========================================== // SUB-COMPONENTS (SVG PARTS) // ========================================== const GridBackground = () => ( {Array.from({ length: 20 }).map((_, i) => ( ))} {Array.from({ length: 25 }).map((_, i) => ( ))} ); const OrganPath = ({ d, color, label, isActive, details }) => ( {/* Glow Effect */} {/* Main Shape */} {/* Label */} {isActive && ( {details} )} ); // Particle System for Food const FoodParticles = ({ progress, currentStage }) => { const pos = getPathPosition(progress); // Random jitter based on stage (more jitter in stomach/mouth) const particles = useMemo(() => Array.from({ length: 12 }), []); let spread = 10; let color = '#fff'; let scale = 1; if (currentStage.id === 'oral') { spread = 15; color = '#a3e635'; } // Greenish (veggie) else if (currentStage.id === 'stomach') { spread = 25; color = '#facc15'; } // Yellow (acid mix) else if (currentStage.id === 'small_intestine') { spread = 20; color = '#86efac'; scale = 0.8; } // Breaking down else if (currentStage.id === 'large_intestine') { spread = 12; color = '#78350f'; scale = 1.2; } // Brown (feces) else if (currentStage.id === 'rectum') { spread = 8; color = '#451a03'; } return ( {particles.map((_, i) => { // Pseudo-random movement based on time const angle = (i / particles.length) * Math.PI * 2 + (progress * 100); const r = (i % 3 + 1) * 3 * scale; const dist = (i % 2 === 0 ? spread : spread * 0.5) * (1 + 0.2 * Math.sin(progress * 200 + i)); return ( ); })} {/* Core Glow */} ); }; // ========================================== // MAIN COMPONENT // ========================================== export default function DigestiveSystemAnimation() { const [progress, setProgress] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // Animation Loop useEffect(() => { const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // Calculate progress (0 to 1) const p = (elapsed % CYCLE_DURATION) / CYCLE_DURATION; setProgress(p); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Derived State const currentStage = STAGES.find(s => progress >= s.start && progress < s.end) || STAGES[STAGES.length - 1]; // Organ Visual Calculations (Dynamic) const timeTick = progress * 1000; // Use progress as a time ticker for oscillations // 1. Mouth (Jaw movement) const jawOpen = Math.abs(Math.sin(timeTick * 10)) * 20; // 2. Stomach (Pulsing) const stomachPulse = 1 + 0.05 * Math.sin(timeTick * 5); // 3. Small Intestine (Villi movement effect - dash offset) const villiOffset = timeTick * 50; // 4. Peristalsis Wave (Esophagus) const esoWave = (timeTick * 20) % 50; return (

); } ```