'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 const COLORS = { bg: '#0f172a', client: '#3b82f6', // Blue server: '#10b981', // Green network: '#f59e0b', // Amber text: '#f8fafc', textDim: '#94a3b8', code: '#a5b4fc', binary: '#6366f1' }; export default function RPCAnimation() { const [phase, setPhase] = useState('IDLE'); // IDLE, CALL, SERIALIZE_REQ, SEND_REQ, PROCESS, SERIALIZE_RES, SEND_RES, DONE const [packetPos, setPacketPos] = useState(0); // 0 to 100% position const [serverLoad, setServerLoad] = useState(0); // 动画循环逻辑 useEffect(() => { let timer: NodeJS.Timeout; const runSequence = async () => { // 1. 客户端发起调用 setPhase('CALL'); await wait(1500); // 2. 序列化请求参数 setPhase('SERIALIZE_REQ'); await wait(1000); // 3. 发送网络请求 setPhase('SEND_REQ'); await animateValue(0, 100, 1500, setPacketPos); // 4. 服务端处理 setPhase('PROCESS'); setPacketPos(100); await animateValue(0, 100, 1500, setServerLoad); // 5. 序列化响应结果 setPhase('SERIALIZE_RES'); await wait(1000); // 6. 发送响应 setPhase('SEND_RES'); await animateValue(100, 0, 1500, setPacketPos); // 7. 客户端接收并反序列化 setPhase('DONE'); await wait(2500); // 重置循环 setPacketPos(0); setServerLoad(0); setPhase('IDLE'); runSequence(); }; runSequence(); return () => clearTimeout(timer); }, []); // 辅助函数：等待 const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); // 辅助函数：平滑数值动画 const animateValue = (start: number, end: number, duration: number, setter: (v: number) => void) => { return new Promise(resolve => { const startTime = performance.now(); const animate = (currentTime: number) => { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); // Ease In Out Quad const ease = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2; setter(start + (end - start) * ease); if (progress < 1) { requestAnimationFrame(animate); } else { resolve(); } }; requestAnimationFrame(animate); }); }; // 生成背景网格 const gridLines = useMemo(() => { const lines = []; for (let i = 0; i < VIEW_WIDTH; i += 40) { lines.push(); } for (let i = 0; i < VIEW_HEIGHT; i += 40) { lines.push(); } return lines; }, []); return ( ); }