```tsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 诗歌内容配置 const POEM_LINES = [ { text: "东皋薄暮望", sub: "Gazing from the heights at twilight", duration: 4000 }, { text: "徙倚欲何依", sub: "Wandering with no one to rely on", duration: 4000 }, { text: "树树皆秋色", sub: "Every tree is dyed with autumn colors", duration: 4000 }, { text: "山山唯落晖", sub: "Every mountain reflects the setting sun", duration: 4000 }, { text: "牧人驱犊返", sub: "The herdsman drives the calves home", duration: 4000 }, { text: "猎马带禽归", sub: "The hunter returns with game", duration: 4000 }, { text: "相顾无相识", sub: "Looking at each other, knowing no one", duration: 4000 }, { text: "长歌怀采薇", sub: "Longing to sing the song of fern gathering", duration: 5000 }, ]; // 粒子类定义 class Particle { x: number; y: number; vx: number; vy: number; size: number; opacity: number; type: 'leaf' | 'star'; constructor(w: number, h: number, type: 'leaf' | 'star') { this.type = type; this.x = Math.random() * w; if (type === 'leaf') { this.y = -20; this.vy = Math.random() * 1.5 + 0.5; this.vx = Math.random() * 2 - 1; this.size = Math.random() * 4 + 2; this.opacity = Math.random() * 0.6 + 0.4; } else { this.y = Math.random() * (h / 2); // 星星只在天上 this.vy = 0; this.vx = Math.random() * 0.1; this.size = Math.random() * 1.5 + 0.5; this.opacity = 0; // 初始隐藏 } } update(w: number, h: number, isNight: boolean) { if (this.type === 'leaf') { this.x += this.vx + Math.sin(this.y / 50) * 0.5; this.y += this.vy; if (this.y > h) { this.y = -20; this.x = Math.random() * w; } } else { // 星星逻辑 this.x -= 0.05; // 缓慢移动 if (isNight) { if (this.opacity < 0.8) this.opacity += 0.01; } else { if (this.opacity > 0) this.opacity -= 0.02; } } } } export default function YeWangAnimation() { // 动画状态 const [currentLineIndex, setCurrentLineIndex] = useState(0); const [globalTime, setGlobalTime] = useState(0); // 用于驱动连续动画 const [isNight, setIsNight] = useState(false); // Refs const requestRef = useRef(); const startTimeRef = useRef(0); const particlesRef = useRef([]); const lineStartTimeRef = useRef(0); // 初始化粒子 useMemo(() => { const leaves = Array.from({ length: 30 }, () => new Particle(VIEW_WIDTH, VIEW_HEIGHT, 'leaf')); const stars = Array.from({ length: 50 }, () => new Particle(VIEW_WIDTH, VIEW_HEIGHT, 'star')); particlesRef.current = [...leaves, ...stars]; }, []); // 动画循环 useEffect(() => { const animate = (time: number) => { if (!startTimeRef.current) { startTimeRef.current = time; lineStartTimeRef.current = time; } const elapsed = time - startTimeRef.current; const lineElapsed = time - lineStartTimeRef.current; const currentDuration = POEM_LINES[currentLineIndex].duration; // 状态更新 setGlobalTime(elapsed); // 粒子更新 particlesRef.current.forEach(p => p.update(VIEW_WIDTH, VIEW_HEIGHT, isNight)); // 诗句切换逻辑 if (lineElapsed > currentDuration) { let nextIndex = currentLineIndex + 1; if (nextIndex >= POEM_LINES.length) { // 循环播放，重置 nextIndex = 0; startTimeRef.current = time; // 重置总时间 setIsNight(false); } // 只有在最后一句时才完全进入黑夜模式 if (nextIndex === POEM_LINES.length - 1) { setIsNight(true); } else if (nextIndex === 0) { setIsNight(false); } setCurrentLineIndex(nextIndex); lineStartTimeRef.current = time; } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [currentLineIndex, isNight]); // 计算视觉参数 // 太阳位置：随总时间下落 // 总周期大约33秒 const totalCycleDuration = POEM_LINES.reduce((acc, cur) => acc + cur.duration, 0); const cycleProgress = (globalTime % totalCycleDuration) / totalCycleDuration; const sunY = 100 + cycleProgress * 400; // 从上到下 const sunOpacity = Math.max(0, 1 - cycleProgress * 1.5); // 逐渐消失 // 天空颜色插值 // 0% -> Blue/Orange (Twilight) // 50% -> Purple/DarkBlue // 100% -> Deep Dark (Night) const getSkyGradient = () => { if (cycleProgress < 0.5) { return { stop1: "#3b82f6", stop2: "#f97316" }; // 蓝到橙 } else if (cycleProgress < 0.8) { return { stop1: "#1e1b4b", stop2: "#7c3aed" }; // 深蓝到紫 } else { return { stop1: "#0f172a", stop2: "#0f172a" }; // 纯夜色 } }; const skyColors = getSkyGradient(); // 模拟音频波形数据 const audioBars = useMemo(() => Array.from({ length: 40 }, (_, i) => i), []); return (

); } ```