'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const SEA_LEVEL = 450; // Utility for random numbers const random = (min, max) => Math.random() * (max - min) + min; // Types and Enums type Phase = 'EVAPORATION' | 'CONDENSATION' | 'PRECIPITATION'; interface Particle { id: number; x: number; y: number; vx: number; vy: number; life: number; maxLife: number; type: 'vapor' | 'rain'; size: number; } interface Cloud { x: number; y: number; scale: number; opacity: number; } export default function WaterCycleAnimation() { // Animation State const [phase, setPhase] = useState('EVAPORATION'); const [particles, setParticles] = useState([]); const [time, setTime] = useState(0); const [clouds, setClouds] = useState([ { x: 300, y: 150, scale: 0, opacity: 0 }, { x: 500, y: 120, scale: 0, opacity: 0 }, { x: 700, y: 160, scale: 0, opacity: 0 }, ]); // HUD Data Simulation const [temperature, setTemperature] = useState(25); const [humidity, setHumidity] = useState(60); // Refs for loop management const requestRef = useRef(); const phaseTimerRef = useRef(0); const particleIdCounter = useRef(0); // Generate Wave Path const getWavePath = (offset: number) => { let path = `M 0 ${SEA_LEVEL}`; for (let x = 0; x <= VIEW_WIDTH; x += 20) { const y = SEA_LEVEL + Math.sin((x + offset) * 0.01) * 10 + Math.sin((x + offset * 2) * 0.02) * 5; path += ` L ${x} ${y}`; } path += ` L ${VIEW_WIDTH} ${VIEW_HEIGHT} L 0 ${VIEW_HEIGHT} Z`; return path; }; // Main Animation Loop const animate = () => { setTime(prev => prev + 1); phaseTimerRef.current += 1; // Phase Management Logic const cycleLength = 900; // Total frames for a cycle approx 15s const evapTime = 300; const condTime = 600; if (phaseTimerRef.current < evapTime) { if (phase !== 'EVAPORATION') setPhase('EVAPORATION'); // Simulate Temp Rise setTemperature(25 + (phaseTimerRef.current / evapTime) * 10); setHumidity(60 + (phaseTimerRef.current / evapTime) * 10); } else if (phaseTimerRef.current < condTime) { if (phase !== 'CONDENSATION') setPhase('CONDENSATION'); setTemperature(35 - ((phaseTimerRef.current - evapTime) / 300) * 15); // Cooling down setHumidity(70 + ((phaseTimerRef.current - evapTime) / 300) * 20); // Saturation } else if (phaseTimerRef.current < cycleLength) { if (phase !== 'PRECIPITATION') setPhase('PRECIPITATION'); setHumidity(90 - ((phaseTimerRef.current - condTime) / 300) * 30); // Releasing water } else { // Reset Cycle phaseTimerRef.current = 0; setParticles([]); } // Cloud Logic setClouds(prevClouds => prevClouds.map((cloud, i) => { let targetScale = 0; let targetOpacity = 0; if (phase === 'EVAPORATION') { targetScale = 0.5; targetOpacity = 0.3; } else if (phase === 'CONDENSATION') { targetScale = 1.2; targetOpacity = 0.9; } else if (phase === 'PRECIPITATION') { targetScale = 1.1; // Slightly shrink when raining targetOpacity = 0.8; // Darker } // Smooth interpolation const newScale = cloud.scale + (targetScale - cloud.scale) * 0.02; const newOpacity = cloud.opacity + (targetOpacity - cloud.opacity) * 0.02; // Slight floating movement const floatY = Math.sin(time * 0.02 + i) * 0.5; return { ...cloud, scale: newScale, opacity: newOpacity, y: cloud.y + floatY }; })); // Particle System Logic setParticles(prev => { const newParticles = [...prev]; // 1. Spawning if (phase === 'EVAPORATION' && phaseTimerRef.current % 5 === 0) { // Spawn Vapor newParticles.push({ id: particleIdCounter.current++, x: random(100, 900), y: SEA_LEVEL + random(0, 20), vx: random(-0.2, 0.2), vy: random(-1, -2), life: 0, maxLife: 200, type: 'vapor', size: random(2, 5) }); } if (phase === 'PRECIPITATION' && phaseTimerRef.current % 2 === 0) { // Spawn Rain (more frequent) for(let k=0; k<3; k++) { newParticles.push({ id: particleIdCounter.current++, x: random(200, 800), y: random(150, 200), // Cloud level vx: random(-0.5, 0.5), vy: random(5, 8), life: 0, maxLife: 100, type: 'rain', size: random(1, 2) }); } } // 2. Updating & Filtering return newParticles .map(p => { let nextP = { ...p, x: p.x + p.vx, y: p.y + p.vy, life: p.life + 1 }; if (p.type === 'vapor') { // Vapor slows down as it goes up and fades nextP.vy *= 0.99; // Drift towards clouds center roughly if (phase === 'CONDENSATION') { const centerX = VIEW_WIDTH / 2; nextP.vx += (centerX - nextP.x) * 0.001; } } else if (p.type === 'rain') { // Gravity acceleration nextP.vy *= 1.01; } return nextP; }) .filter(p => { // Remove if dead if (p.life > p.maxLife) return false; // Remove if off screen or hits water if (p.y < -50 || p.y > SEA_LEVEL + 20) return false; // Vapor disappears into clouds during condensation if (p.type === 'vapor' && phase === 'CONDENSATION' && p.y < 200) return false; return true; }); }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [phase, time]); // Dependencies ensure fresh state access inside loop // Visual Components Helpers const wavePath1 = useMemo(() => getWavePath(time * 2), [time]); const wavePath2 = useMemo(() => getWavePath(time * 1.5 + 100), [time]); // Dynamic Styles const sunColor = phase === 'EVAPORATION' ? '#f59e0b' : '#fbbf24'; const sunGlow = phase === 'EVAPORATION' ? 1 : 0.5; const skyGradient = phase === 'PRECIPITATION' ? ['#0f172a', '#1e293b'] : ['#0f172a', '#334155']; const phaseText = { 'EVAPORATION': '蒸发 (Evaporation)', 'CONDENSATION': '凝结 (Condensation)', 'PRECIPITATION': '降水 (Precipitation)' }; const phaseDesc = { 'EVAPORATION': '太阳辐射加热水体，液态水转化为水蒸气上升。', 'CONDENSATION': '水蒸气上升遇冷，凝结成微小水滴或冰晶，形成云。', 'PRECIPITATION': '云滴增大变重，在重力作用下从云层降落。' }; return (

); }