```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ========================================== // 配置常量 // ========================================== const WIDTH = 900; const HEIGHT = 500; const TANK_WIDTH = 360; const TANK_HEIGHT = 340; const CENTER_X = WIDTH / 2; const TANK_Y = (HEIGHT - TANK_HEIGHT) / 2 + 20; const PARTICLE_COUNT = 250; // 增加粒子数量以增强视觉密度 // 颜色定义 - 赛博/生化科技风格 const THEME = { bg: '#0f172a', // 深蓝底色 (用户指定) primary: '#06b6d4', // 科技青 (UI主色) secondary: '#3b82f6', // 辅助蓝 accent: '#f472b6', // 沉淀剂粉 (高亮) warning: '#fbbf24', // 警告/变化色 grid: '#1e293b', // 网格线 glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(255, 255, 255, 0.2)', textMain: '#e2e8f0', textDim: '#64748b', liquidSolute: '#0ea5e9', // 溶解态溶液颜色 liquidClear: '#0f172a', // 上清液颜色 (接近背景色，表示澄清) particleSolute: '#38bdf8', // 溶质粒子 (小，蓝) particleSolid: '#f8fafc', // 沉淀粒子 (大，白/亮) }; // ========================================== // 辅助函数 // ========================================== const randomRange = (min, max) => Math.random() * (max - min) + min; // 初始化粒子系统 const initParticles = () => { return Array.from({ length: PARTICLE_COUNT }).map((_, i) => ({ id: i, x: randomRange(CENTER_X - TANK_WIDTH / 2 + 20, CENTER_X + TANK_WIDTH / 2 - 20), y: randomRange(TANK_Y + 40, TANK_Y + TANK_HEIGHT - 40), vx: randomRange(-1.2, 1.2), // 初始布朗运动速度 vy: randomRange(-1.2, 1.2), radius: randomRange(1.0, 1.8), // 初始溶解态非常微小 targetRadius: randomRange(3.0, 5.5), // 沉淀后颗粒变大 opacity: randomRange(0.3, 0.6), state: 'dissolved', // dissolved, reacting, settling, settled mass: randomRange(1.0, 2.0), settledX: 0, // 记录沉淀后的最终位置，防止振动 settledY: 0, })); }; // ========================================== // 主组件 // ========================================== export default function BioPrecipitationAnim() { // 状态管理 const [particles, setParticles] = useState([]); const [phase, setPhase] = useState('dissolved'); // 阶段映射: dissolved(溶解平衡) -> adding(加入试剂) -> reacting(晶核形成) -> settling(沉降分离) -> complete(分离完成) const [time, setTime] = useState(0); // 模拟数据状态 const [simData, setSimData] = useState({ ph: 7.4, temp: 25.0, turbidity: 2, // 浊度 stirSpeed: 100, // rpm reagentVol: 0, // 试剂体积 }); // 动画引用 const reqRef = useRef(); const startTimeRef = useRef(null); const dropRef = useRef({ y: TANK_Y - 120, opacity: 0, active: false }); // 试剂滴 // 初始化 useEffect(() => { setParticles(initParticles()); }, []); // 核心动画循环 useEffect(() => { const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // 周期控制 (总周期约 20秒) const CYCLE_DURATION = 20000; const loopTime = elapsed % CYCLE_DURATION; // 1. 阶段状态机控制 let currentPhase = 'dissolved'; if (loopTime < 3000) currentPhase = 'dissolved'; else if (loopTime < 6000) currentPhase = 'adding'; else if (loopTime < 11000) currentPhase = 'reacting'; else if (loopTime < 17000) currentPhase = 'settling'; else currentPhase = 'complete'; if (currentPhase !== phase) { setPhase(currentPhase); // 循环重置 if (currentPhase === 'dissolved' && loopTime < 100) { setParticles(initParticles()); setSimData(prev => ({ ...prev, ph: 7.4, turbidity: 2, reagentVol: 0 })); } } // 2. 模拟数据更新逻辑 let nextData = { ...simData }; // 试剂滴落逻辑 if (currentPhase === 'adding') { dropRef.current.active = true; dropRef.current.opacity = 1; dropRef.current.y += 10; if (dropRef.current.y > TANK_Y + 40) { dropRef.current.y = TANK_Y - 80; // 重置 nextData.reagentVol = Math.min(100, nextData.reagentVol + 1.5); // 模拟等电点沉淀或盐析：pH改变或离子强度改变 nextData.ph = Math.max(4.8, nextData.ph - 0.04); } } else { dropRef.current.active = false; dropRef.current.opacity = 0; dropRef.current.y = TANK_Y - 120; } // 反应阶段数据 if (currentPhase === 'reacting') { nextData.turbidity = Math.min(400, nextData.turbidity + 3); // 变浑浊 nextData.temp = Math.min(30, nextData.temp + 0.02); // 轻微放热 nextData.stirSpeed = 250; // 快速搅拌以混合 } else if (currentPhase === 'settling') { nextData.stirSpeed = Math.max(0, nextData.stirSpeed - 5); // 停止搅拌 nextData.turbidity = Math.max(5, nextData.turbidity - 2); // 上清液变清 } else if (currentPhase === 'complete') { nextData.stirSpeed = 0; nextData.turbidity = 2; } else if (currentPhase === 'dissolved') { nextData.stirSpeed = 100; } // 数据微小波动 nextData.ph += (Math.random() - 0.5) * 0.01; setSimData(nextData); setTime(loopTime); // 3. 粒子物理引擎 setParticles(prevParticles => { return prevParticles.map(p => { // 如果已经沉降完成，绝对锁定位置，防止振动 if (p.state === 'settled') { return p; } let { x, y, vx, vy, state, radius, opacity, mass, targetRadius } = p; // 状态流转逻辑 if (currentPhase === 'reacting' && state === 'dissolved') { // 随机触发成核反应 (变成不溶性颗粒) if (Math.random() < 0.08) { state = 'reacting'; } } if (currentPhase === 'settling' && state === 'reacting') { state = 'settling'; } // --- 运动逻辑 --- if (state === 'dissolved') { // 溶解态：快速布朗运动 x += vx; y += vy; // 边界反弹 if (x < CENTER_X - TANK_WIDTH/2 + 10 || x > CENTER_X + TANK_WIDTH/2 - 10) vx *= -1; if (y < TANK_Y + 10 || y > TANK_Y + TANK_HEIGHT - 10) vy *= -1; } else if (state === 'reacting') { // 反应态：颗粒聚集长大 if (radius < targetRadius) radius += 0.08; opacity = Math.min(1, opacity + 0.02); // 变不透明 // 搅拌导致的湍流 vx += (Math.random() - 0.5) * 0.8; vy += (Math.random() - 0.5) * 0.8; vx *= 0.92; // 阻尼 vy *= 0.92; x += vx; y += vy; // 限制在容器内 if (x < CENTER_X - TANK_WIDTH/2 + 10) x = CENTER_X - TANK_WIDTH/2 + 10; if (x > CENTER_X + TANK_WIDTH/2 - 10) x = CENTER_X + TANK_WIDTH/2 - 10; if (y < TANK_Y + 10) y = TANK_Y + 10; if (y > TANK_Y + TANK_HEIGHT - 10) y = TANK_Y + TANK_HEIGHT - 10; } else if (state === 'settling') { // 沉降态：迅速向下 const bottomY = TANK_Y + TANK_HEIGHT - 20; // 计算堆积形状 (高斯分布，中间高两边低) const distFromCenter = (x - CENTER_X) / (TANK_WIDTH / 2.2); const pileHeight = 60 * Math.exp(-3 * distFromCenter * distFromCenter) + 10; const targetY = bottomY - pileHeight + randomRange(-5, 5); // 稍微有点随机性，看起来自然 if (y < targetY - radius) { // 加速下落 (模拟絮凝后的快速沉降) vy += 0.15 * mass; if (vy > 4) vy = 4; // 终端速度 y += vy; x += Math.sin(y * 0.05) * 0.3; // 稍微左右摆动 } else { // **关键修改**：一旦接触底部，立即锁定，不再计算任何物理 state = 'settled'; y = targetY - radius; vx = 0; vy = 0; } } return { ...p, x, y, vx, vy, state, radius, opacity }; }); }); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, [phase]); // ========================================== // 渲染组件 // ========================================== // 背景网格线 const Grid = useMemo(() => ( {Array.from({ length: 20 }).map((_, i) => ( ))} {Array.from({ length: 20 }).map((_, i) => ( ))} ), []); return (

); } ```