'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // Helper for smooth animation loop const useAnimationFrame = (callback) => { const requestRef = useRef(); const previousTimeRef = useRef(); const animate = time => { if (previousTimeRef.current != undefined) { const deltaTime = time - previousTimeRef.current; callback(deltaTime, time); } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); }; export const OdeToGooseView = () => { const [time, setTime] = useState(0); const [verseIndex, setVerseIndex] = useState(0); // Poetry lines const verses = [ "鹅鹅鹅", "曲项向天歌", "白毛浮绿水", "红掌拨清波" ]; // Animation Loop useAnimationFrame((deltaTime, totalTime) => { setTime(totalTime / 1000); // Convert to seconds }); // Cycle verses useEffect(() => { const interval = setInterval(() => { setVerseIndex(prev => (prev + 1) % verses.length); }, 4000); return () => clearInterval(interval); }, []); // Dynamic Goose Calculations const gooseState = useMemo(() => { const t = time; // Bobbing motion (buoyancy) const bobY = Math.sin(t * 2) * 5; const bodyX = VIEW_WIDTH / 2 - 100; const bodyY = VIEW_HEIGHT / 2 + 50 + bobY; // Singing Cycle (Neck stretching) // Every 4 seconds, stretch neck up const singCycle = (Math.sin(t * 1.5) + 1) / 2; // 0 to 1 const isSinging = singCycle > 0.7; // Threshold for "high" note // Neck control points // Base of neck (attached to body) const neckBaseX = bodyX + 60; const neckBaseY = bodyY - 20; // Head position // Normal: Forward and slightly down. Singing: Up and back. const headBaseX = neckBaseX + 40 - (isSinging ? 10 : 0); const headBaseY = neckBaseY - 60 - (isSinging ? 40 : 0) + (Math.sin(t * 3) * 2); // Control point for the curve (The "Qu Xiang") const cpX = neckBaseX - 30 + (isSinging ? 20 : 0); const cpY = neckBaseY - 20 - (isSinging ? 20 : 0); // Beak const beakOpen = isSinging ? 10 : 2; // Feet (Paddling) const paddleL = Math.sin(t * 5) * 10; const paddleR = Math.cos(t * 5) * 10; return { bodyX, bodyY, neckBaseX, neckBaseY, headBaseX, headBaseY, cpX, cpY, beakOpen, paddleL, paddleR, isSinging }; }, [time]); // Generate Water Waves const waves = useMemo(() => { const layers = []; for (let i = 0; i < 3; i++) { const points = []; const segmentWidth = 50; const totalSegments = VIEW_WIDTH / segmentWidth + 2; const yOffset = VIEW_HEIGHT / 2 + 80 + (i * 20); const speed = 0.5 + (i * 0.2); const amplitude = 10 - (i * 2); for (let j = 0; j <= totalSegments; j++) { const x = j * segmentWidth; const waveY = Math.sin((j / 2) + time * speed) * amplitude; points.push(`${x},${yOffset + waveY}`); } // Close path points.push(`${VIEW_WIDTH},${VIEW_HEIGHT}`); points.push(`0,${VIEW_HEIGHT}`); layers.push({ d: `M0,${VIEW_HEIGHT} L${points.join(' ')} Z`, color: i === 0 ? 'rgba(164, 219, 189, 0.4)' : i === 1 ? 'rgba(109, 196, 172, 0.5)' : 'rgba(74, 169, 149, 0.6)' }); } return layers; }, [time]); // Generate Ripples (Particle effect) const ripples = useMemo(() => { return Array.from({ length: 5 }).map((_, i) => { const offset = i * 2; const t = (time + offset) % 4; // 4 second life const scale = t * 20; const opacity = 1 - (t / 4); return { scale, opacity, x: gooseState.bodyX + 40, y: gooseState.bodyY + 40 }; }); }, [time, gooseState.bodyX, gooseState.bodyY]); return ( ); };