'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 const COLORS = { bg: '#0f172a', grid: '#1e293b', primary: '#0ea5e9', // Sky blue for text/highlights metalLight: '#94a3b8', metalDark: '#475569', powderLoose: '#64748b', // Slate 500 powderCompressed: '#f59e0b', // Amber 500 for heat/pressure success: '#10b981', danger: '#ef4444', textMain: '#f8fafc', textSub: '#94a3b8' }; // 粒子生成辅助函数 const generateParticles = (count: number) => { return Array.from({ length: count }, (_, i) => ({ id: i, x: Math.random(), // 0-1 relative position y: Math.random(), // 0-1 relative position size: Math.random() * 2 + 1, })); }; export const PowderMetallurgyAnimation = () => { // 动画状态 const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(null); // 周期定义 (单位: ms) const CYCLE_DURATION = 12000; // 阶段定义 const PHASES = [ { name: '准备就绪 (Ready)', start: 0, end: 1000 }, { name: '装粉 (Filling)', start: 1000, end: 3500 }, { name: '预压 (Pre-Compacting)', start: 3500, end: 5000 }, { name: '主压制 (Main Pressing)', start: 5000, end: 7000 }, { name: '保压 (Pressure Holding)', start: 7000, end: 8500 }, { name: '脱模 (Ejection)', start: 8500, end: 10500 }, { name: '取件复位 (Reset)', start: 10500, end: 12000 }, ]; // 粒子数据 const particles = useMemo(() => generateParticles(200), []); // 动画循环 const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // 循环播放 const loopedTime = elapsed % CYCLE_DURATION; setTime(loopedTime); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 计算当前阶段 const currentPhase = PHASES.find(p => time >= p.start && time < p.end) || PHASES[0]; // --- 动态参数计算逻辑 --- // 1. 送料靴位置 (Feeder) let feederX = -250; // 初始在左侧屏幕外 const fillStart = 1000, fillEnd = 3500; if (time >= fillStart && time < fillEnd) { const t = (time - fillStart) / (fillEnd - fillStart); if (t < 0.3) feederX = -250 + (t / 0.3) * 250; // 移入 else if (t > 0.7) feederX = 0 - ((t - 0.7) / 0.3) * 250; // 移出 else feederX = 0; // 停留 } // 2. 粉末状态 // 模腔参数 const cavityTopY = 400; const maxPowderHeight = 120; const compressedHeight = 60; let powderHeight = 0; let powderOpacity = 0; let powderColorRatio = 0; // 0 = loose, 1 = compressed let powderY = cavityTopY; // 粉末底部位置 // 装粉阶段 if (time >= fillStart && time < fillEnd) { const t = (time - fillStart) / (fillEnd - fillStart); if (t > 0.3 && t < 0.7) { powderOpacity = 1; powderHeight = ((t - 0.3) / 0.4) * maxPowderHeight; } else if (t >= 0.7) { powderOpacity = 1; powderHeight = maxPowderHeight; } } else if (time >= fillEnd) { powderOpacity = 1; powderHeight = maxPowderHeight; } // 3. 冲头位置 (Punches) let upperPunchY = 100; // 初始高位 let lowerPunchY = cavityTopY + maxPowderHeight; // 初始低位 (模腔底) const pressStart = 3500, pressEnd = 7000; const holdEnd = 8500; const ejectStart = 8500, ejectEnd = 10500; // 压制阶段 if (time >= pressStart && time < holdEnd) { const t = Math.min(1, (time - pressStart) / (pressEnd - pressStart)); // 上冲头下行 const targetUpperY = cavityTopY - compressedHeight; upperPunchY = 100 + (targetUpperY - 100) * easeOutCubic(t); // 下冲头微动 (双向压制模拟) const targetLowerY = cavityTopY; lowerPunchY = (cavityTopY + maxPowderHeight) - (maxPowderHeight - compressedHeight/2) * 0.1 * t; // 稍微上浮一点模拟双向 // 粉末压缩 if (upperPunchY > cavityTopY - maxPowderHeight) { // 当上冲头接触粉末后 const compressionProgress = Math.min(1, Math.max(0, (time - 5000) / 2000)); powderHeight = maxPowderHeight - (maxPowderHeight - compressedHeight) * compressionProgress; powderColorRatio = compressionProgress; // 粉末顶部跟随上冲头，或者被压缩 powderY = cavityTopY; // 视觉上粉末始终填充在下冲头之上 } } // 脱模阶段 else if (time >= ejectStart && time < ejectEnd) { const t = (time - ejectStart) / (ejectEnd - ejectStart); // 上冲头回退 upperPunchY = (cavityTopY - compressedHeight) - 150 * t; // 下冲头顶出 lowerPunchY = (cavityTopY + maxPowderHeight) - (maxPowderHeight + 10) * t; powderHeight = compressedHeight; powderColorRatio = 1; powderY = cavityTopY - (maxPowderHeight * t); // 跟随下冲头上升 } // 复位 else if (time >= ejectEnd) { const t = (time - ejectEnd) / (12000 - ejectEnd); upperPunchY = (cavityTopY - compressedHeight) - 150 - 50 * t; // 继续回退 lowerPunchY = cavityTopY - 10 + (maxPowderHeight + 10) * t; // 下冲头回位 // 产品移除 (淡出并向右移动) powderHeight = compressedHeight; powderColorRatio = 1; powderY = cavityTopY - maxPowderHeight; powderOpacity = 1 - t; // Fade out feederX = -250; // Reset feeder } // 4. 仪表盘数据 let pressure = 0; // MPa let density = 2.8; // g/cm3 if (time > 5000 && time < 8500) { const t = Math.min(1, (time - 5000) / 2000); pressure = t * 600; // Max 600 MPa density = 2.8 + t * (7.2 - 2.8); // To 7.2 g/cm3 } else if (time >= 8500) { pressure = 0; density = 7.2; } // 缓动函数 function easeOutCubic(x: number): number { return 1 - Math.pow(1 - x, 3); } // 渲染逻辑 // 计算粉末的具体渲染位置 // 假设下冲头顶部是粉末的底部 // 实际上：LowerPunchY是下冲头底部坐标，需要减去高度得到顶部？ // 简化：LowerPunchY 直接作为下冲头顶部Y坐标 (SVG坐标系向下为正) // 但是上面逻辑中 lowerPunchY 是随时间变化的。 // 修正坐标系逻辑： // 模具台面 Y = 400 (cavityTopY) // 下冲头 Y 定义为下冲头顶面位置。初始 = 400 + 120 = 520 (深腔) // 上冲头 Y 定义为上冲头底面位置。初始 = 100 // 压制时：上冲头 Y -> 400 (台面) -> 400 + 压缩深度? // 不，粉末在模腔内。 // 压制结束：下冲头顶面 @ 520, 上冲头底面 @ 460 (假设压成60高) -> 错误，这是单向压制且位置不对 // 重新映射视觉坐标： // Die Table Surface: Y = 400. // Lower Punch Top Surface: `renderLowerPunchY`. // Upper Punch Bottom Surface: `renderUpperPunchY`. const renderLowerPunchY = (time >= ejectStart) ? 400 + maxPowderHeight - (maxPowderHeight) * ((time - ejectStart)/(ejectEnd-ejectStart)) // Ejecting: 520 -> 400 : (time > 10500 ? 400 + (time-10500)/1500 * maxPowderHeight : 400 + maxPowderHeight); // Resetting // 压制时，上冲头进入模具 // 如果是 Filling: 上冲头不动 // 如果是 Pressing: 上冲头 Y 从 100 -> 400 (接触台面) -> 400 + (maxPowder - compressed) -> 挤压粉末 // 简化视觉模型： // 粉末底部 = renderLowerPunchY // 粉末顶部 = renderLowerPunchY - powderHeight // 上冲头底部 = Math.min(originalUpperAnim, 粉末顶部) const powderBottomVisual = renderLowerPunchY; const powderTopVisual = renderLowerPunchY - powderHeight; // 覆盖之前的 upperPunchY 逻辑，使用更严谨的视觉位置 let visualUpperPunchY = 150; // Default hover if (time >= pressStart && time < ejectStart) { const progress = Math.min(1, (time - pressStart) / (pressEnd - pressStart)); // 0->1 // 目标：压到粉末顶部 const target = powderTopVisual; visualUpperPunchY = 150 + (target - 150) * easeOutCubic(progress); } else if (time >= ejectStart) { visualUpperPunchY = powderTopVisual - 50 - (time - ejectStart) * 0.1; // Move away } // 颜色插值 const r1 = parseInt(COLORS.powderLoose.slice(1, 3), 16); const g1 = parseInt(COLORS.powderLoose.slice(3, 5), 16); const b1 = parseInt(COLORS.powderLoose.slice(5, 7), 16); const r2 = parseInt(COLORS.powderCompressed.slice(1, 3), 16); const g2 = parseInt(COLORS.powderCompressed.slice(3, 5), 16); const b2 = parseInt(COLORS.powderCompressed.slice(5, 7), 16); const curR = Math.round(r1 + (r2 - r1) * powderColorRatio); const curG = Math.round(g1 + (g2 - g1) * powderColorRatio); const curB = Math.round(b1 + (b2 - b1) * powderColorRatio); const currentPowderColor = `rgb(${curR}, ${curG}, ${curB})`; return ( ); };