```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 粒子系统：桃源花瓣 const ParticleSystem = () => { const [particles, setParticles] = useState(() => Array.from({ length: 60 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 4 + 1, speed: Math.random() * 1.5 + 0.5, wobble: Math.random() * Math.PI * 2, opacity: Math.random() * 0.5 + 0.3, })) ); useEffect(() => { let animationFrameId; const update = () => { setParticles(prev => prev.map(p => { let newY = p.y + p.speed; let newX = p.x + Math.sin(p.wobble) * 0.5; let newWobble = p.wobble + 0.02; if (newY > VIEW_HEIGHT) { newY = -10; newX = Math.random() * VIEW_WIDTH; } return { ...p, x: newX, y: newY, wobble: newWobble }; })); animationFrameId = requestAnimationFrame(update); }; update(); return () => cancelAnimationFrame(animationFrameId); }, []); return ( {particles.map((p, i) => ( ))} ); }; // 武器/角色组件 const WeaponSpirit = ({ type, x, y, delay, isActive }) => { // 定义不同角色的特征 // 刘备：双股剑 (Twin Swords) - 金色/仁义 // 关羽：青龙偃月刀 (Green Dragon Blade) - 绿色/忠义 // 张飞：丈八蛇矛 (Serpent Spear) - 红色/勇猛 const config = { liu: { color: '#fbbf24', // Amber-400 secondary: '#f59e0b', path: "M-8 40 L-8 -20 L-12 -25 L-8 -30 L-4 -25 L-8 -20 M8 40 L8 -20 L4 -25 L8 -30 L12 -25 L8 -20", // 简化双剑 label: "刘备", glowId: "glowGold" }, guan: { color: '#10b981', // Emerald-500 secondary: '#059669', path: "M0 50 L0 -10 Q0 -40 25 -30 L25 -10 Q0 -20 0 -10", // 简化大刀 label: "关羽", glowId: "glowGreen" }, zhang: { color: '#f43f5e', // Rose-500 secondary: '#e11d48', path: "M0 50 L0 10 Q5 0 -5 -10 Q-15 -20 0 -40", // 简化蛇矛 label: "张飞", glowId: "glowRed" } }[type]; return ( {/* 光环底座 */} {/* 武器主体 */} {/* 名字 */} {config.label} ); }; export const PeachGardenOathAnimation = () => { const [phase, setPhase] = useState(0); // 0: Start, 1: Weapons, 2: Converge, 3: Oath const [showText, setShowText] = useState(false); useEffect(() => { // 动画序列控制器 const sequence = async () => { // Phase 0: 场景淡入 (由CSS处理) await new Promise(r => setTimeout(r, 1000)); // Phase 1: 武器显现 setPhase(1); await new Promise(r => setTimeout(r, 2500)); // Phase 2: 结义 (聚拢) setPhase(2); await new Promise(r => setTimeout(r, 1500)); // Phase 3: 文字显现 setPhase(3); setShowText(true); // Reset loop await new Promise(r => setTimeout(r, 6000)); setShowText(false); setPhase(0); sequence(); }; sequence(); }, []); // 计算三兄弟的位置 // Phase 1: 分开, Phase 2+: 聚拢 const getPos = (baseX, baseY, offsetX) => { if (phase >= 2) { // 聚拢位置，稍微保留一点间距 return { x: VIEW_WIDTH / 2 + offsetX * 0.2, y: VIEW_HEIGHT / 2 + 50 }; } return { x: baseX, y: baseY }; }; const posLiu = getPos(VIEW_WIDTH / 2, VIEW_HEIGHT / 2 - 50, 0); const posGuan = getPos(VIEW_WIDTH / 2 + 250, VIEW_HEIGHT / 2 + 50, 250); const posZhang = getPos(VIEW_WIDTH / 2 - 250, VIEW_HEIGHT / 2 + 50, -250); return (

); }; ```