import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Thermometer, Cpu, Zap, Activity, Snowflake } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; // 辅助函数：生成随机数 const random = (min, max) => Math.random() * (max - min) + min; // 粒子组件：用于表现热噪声 const ThermalParticle = ({ x, y, tempRatio, time, id }) => { // tempRatio: 1.0 (300K) -> 0.0 (10mK) // 粒子速度和范围随温度降低而减小 const speed = 0.5 + tempRatio * 4.0; const range = 2 + tempRatio * 30; // 使用简单的三角函数模拟布朗运动，避免每帧重算大量物理状态 const offsetX = Math.sin(time * speed * 0.05 + id) * range; const offsetY = Math.cos(time * speed * 0.03 + id * 2) * range; // 颜色插值：红(热) -> 蓝(冷) // Red: 255, 50, 50 -> Blue: 100, 200, 255 const r = Math.floor(100 + tempRatio * 155); const g = Math.floor(200 - tempRatio * 150); const b = 255; const opacity = 0.3 + tempRatio * 0.5; return ( ); }; // 量子波函数演示组件 const QuantumWave = ({ x, y, width, height, tempRatio, time }) => { // 温度越高，波形越混乱（退相干）；温度越低，波形越纯净（相干） const points = []; const segments = 50; for (let i = 0; i <= segments; i++) { const px = (i / segments) * width; // 纯净波 const pureSignal = Math.sin((i / 5) + time * 0.1) * (height * 0.4); // 噪声波 const noise = (Math.sin(i * 13 + time) + Math.cos(i * 23 - time)) * (height * 0.4); // 混合：高温时噪声大，低温时纯净 const py = (height / 2) + pureSignal * (1 - tempRatio * 0.5) + noise * tempRatio; points.push(`${px},${py}`); } return ( {/* 背景框 */} {/* 波形 */} 0.5 ? "#ef4444" : "#22d3ee"} strokeWidth="2" strokeLinecap="round" /> QUBIT STATE COHERENCE ); }; export default function DilutionRefrigeratorAnim() { const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // 动画周期状态管理 // 0-1000: 降温过程 // 1000-1500: 稳定运行，展示量子态 // 1500-1600: 重置 const ANIM_DURATION = 1600; useEffect(() => { const animate = (now) => { if (!startTimeRef.current) startTimeRef.current = now; const elapsed = now - startTimeRef.current; // 简单的帧计数，用于驱动波形和粒子 setTime(prev => (prev + 1) % 100000); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 计算当前动画进度 (0 ~ 1) const progressLoop = (time % ANIM_DURATION); const coolingPhase = Math.min(progressLoop / 1000, 1); // 0 -> 1 (降温) const isResetting = progressLoop > 1500; // 计算模拟温度 (Logarithmic scale simulation) // 300K -> 4K -> 1K -> 0.1K -> 0.01K // coolingPhase 0 -> 1 // Log temp: log(300) ~ 5.7, log(0.01) ~ -4.6 // Total range ~ 10.3 const logTemp = 5.7 - (coolingPhase * 10.3); const currentTemp = Math.max(0.01, Math.exp(logTemp)); // 温度比例 1.0 (热) -> 0.0 (冷)，用于视觉控制 // 为了视觉效果，我们让它非线性变化 const tempRatio = Math.max(0, 1 - coolingPhase); // 粒子系统初始化 const particles = useMemo(() => { const p = []; for(let i=0; i<60; i++) { p.push({ id: i, x: random(WIDTH/2 - 150, WIDTH/2 + 150), y: random(100, 600) }); } return p; }, []); // 格式化温度显示 const formatTemp = (t) => { if (t >= 1) return `${t.toFixed(1)} K`; return `${(t * 1000).toFixed(1)} mK`; }; // 颜色定义 const goldGradientId = "goldGradient"; const copperGradientId = "copperGradient"; const pipeGradientId = "pipeGradient"; // 阶段标签 const stages = [ { label: "室温 (300K)", y: 120 }, { label: "脉冲管冷却 (4K)", y: 220 }, { label: "蒸馏级 (1K)", y: 320 }, { label: "冷盘 (100mK)", y: 420 }, { label: "混合室 (10mK)", y: 520 }, ]; return (

); }