'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 辅助函数：生成随机数据 const randomHex = () => Math.floor(Math.random() * 16).toString(16).toUpperCase(); const generateSectorData = (length = 8) => Array.from({ length }, () => randomHex()).join(''); export default function HardDriveAnimation() { // 动画状态 const [armAngle, setArmAngle] = useState(20); // 读写臂角度 const [dataParticles, setDataParticles] = useState([]); const [systemInfo, setSystemInfo] = useState({ rpm: 7200, temp: 34, sector: 0, track: 0, status: 'IDLE' // IDLE, SEEKING, READING }); // Refs for animation loop logic const requestRef = useRef(); const previousTimeRef = useRef(); const armTargetRef = useRef(20); const armStateRef = useRef<'SEEKING' | 'READING'>('SEEKING'); const readTimerRef = useRef(0); const particleIdCounter = useRef(0); // 初始化粒子和逻辑 useEffect(() => { const animate = (time: number) => { if (previousTimeRef.current !== undefined) { const deltaTime = time - previousTimeRef.current; // 1. 读写臂逻辑 (Arm Logic) if (armStateRef.current === 'SEEKING') { // 移动向目标 const diff = armTargetRef.current - armAngle; if (Math.abs(diff) < 0.5) { armStateRef.current = 'READING'; readTimerRef.current = 0; setSystemInfo(prev => ({ ...prev, status: 'READING', sector: Math.floor(Math.random() * 5000) })); } else { // 平滑移动 (Easing) setArmAngle(prev => prev + diff * 0.1); setSystemInfo(prev => ({ ...prev, status: 'SEEKING', track: Math.floor(prev.track + diff * 10) })); } } else if (armStateRef.current === 'READING') { readTimerRef.current += deltaTime; // 读取持续时间 if (readTimerRef.current > 800) { armStateRef.current = 'SEEKING'; // 设定新的随机目标角度 (范围 10 deg 到 50 deg) armTargetRef.current = 10 + Math.random() * 40; } // 生成数据粒子 (发射率控制) if (readTimerRef.current % 50 < 16) { // 简单频率控制 const armRad = (armAngle * Math.PI) / 180; // 计算读写头尖端位置 (基于转轴 pivot) // Pivot 位置: (850, 450) - 假设值，需与SVG布局对齐 // 实际上我们用相对坐标计算 // 假设 Arm Pivot 在 (800, 300) 附近，臂长 350 // 简化计算：我们直接在渲染时计算发射点，这里只存状态 particleIdCounter.current += 1; setDataParticles(prev => [ ...prev, { id: particleIdCounter.current, trackRadius: 350 - (armAngle * 4), // 模拟不同磁道的半径 angle: armAngle, // 初始角度 life: 1.0, val: Math.random() > 0.5 ? '1' : '0', color: Math.random() > 0.8 ? '#ff3366' : '#00ffff' } ]); } } // 2. 粒子动画逻辑 (Particle Logic) setDataParticles(prevParticles => { return prevParticles .map(p => ({ ...p, life: p.life - 0.02, // 衰减 // 粒子沿切线飞出或飞向缓冲区 xOffset: (1 - p.life) * 400, // 向右飞 yOffset: (Math.sin(p.life * 10) * 20) // 微微波动 })) .filter(p => p.life > 0); }); // 3. 模拟数据波动 setSystemInfo(prev => ({ ...prev, rpm: 7200 + Math.floor(Math.random() * 5), temp: 34 + (armStateRef.current === 'READING' ? 0.1 : -0.05), })); } previousTimeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [armAngle]); // 计算几何参数 const diskCenter = { x: 350, y: 300 }; const diskRadius = 240; const armPivot = { x: 750, y: 500 }; const armLength = 480; // 根据角度计算读写头位置 const headX = armPivot.x - Math.cos(armAngle * Math.PI / 180) * armLength; const headY = armPivot.y - Math.sin(armAngle * Math.PI / 180) * armLength; return ( ); }