'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; export const OnlineLearningAnimation = () => { const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 动画状态管理 const [phase, setPhase] = useState(0); // 0: Connecting (连接中) // 1: Teacher Speaking (外教提问) // 2: Student Thinking/Speaking (学员回答) // 3: Correction/Optimization (纠正/优化) // 4: Success/Score (完成) const [waveOffset, setWaveOffset] = useState(0); const [packetPos, setPacketPos] = useState(0); // 模拟音频波形数据 const audioBars = Array.from({ length: 5 }, (_, i) => i); // 循环逻辑 useEffect(() => { let timer: NodeJS.Timeout; const runSequence = async () => { // Phase 0: Connecting setPhase(0); await new Promise(r => setTimeout(r, 2000)); // Phase 1: Teacher "How was your day?" setPhase(1); await new Promise(r => setTimeout(r, 2500)); // Phase 2: Student "I is very happy." (Grammar mistake simulation) setPhase(2); await new Promise(r => setTimeout(r, 2500)); // Phase 3: Correction "I am very happy." setPhase(3); await new Promise(r => setTimeout(r, 2000)); // Phase 4: Success setPhase(4); await new Promise(r => setTimeout(r, 1500)); // Loop runSequence(); }; runSequence(); return () => clearTimeout(timer); }, []); // 帧动画循环 (用于波形和数据包) useEffect(() => { let frameId: number; const animate = () => { setWaveOffset(prev => (prev + 0.2) % (Math.PI * 2)); setPacketPos(prev => (prev + 2) % 100); // 0 to 100% frameId = requestAnimationFrame(animate); }; frameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(frameId); }, []); // 背景粒子 const particles = useMemo(() => { return Array.from({ length: 30 }, (_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 2 + 0.5, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.5 + 0.1 })); }, []); return ( ); };