```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; // ---------------------------------------------------------------------- // 辅助函数与常量 // ---------------------------------------------------------------------- // 试剂清单 const REAGENTS = [ { name: "ddH2O", vol: "12.5μl", color: "#38bdf8" }, { name: "10*PCR Buffer", vol: "2.5μl", color: "#818cf8" }, { name: "dNTP (2.5mM)", vol: "2.0μl", color: "#c084fc" }, { name: "Primer 1 (20μM)", vol: "0.5μl", color: "#fb7185" }, { name: "Primer 2 (20μM)", vol: "0.5μl", color: "#f472b6" }, { name: "TaqE (5U/μl)", vol: "0.15μl", color: "#34d399" }, { name: "Template DNA", vol: "2.0μl", color: "#fbbf24" }, ]; // PCR 循环阶段定义 const CYCLES_PHASES = [ { name: "预变性", temp: 94, duration: 2000, label: "Initial Denaturation" }, // 缩短演示时间 { name: "变性", temp: 94, duration: 1500, label: "Denaturation" }, { name: "退火", temp: 56, duration: 1500, label: "Annealing" }, { name: "延伸", temp: 72, duration: 1500, label: "Extension" }, { name: "终止延伸", temp: 72, duration: 2000, label: "Final Extension" }, { name: "保存", temp: 4, duration: 1500, label: "Hold" } ]; // ---------------------------------------------------------------------- // 组件主体 // ---------------------------------------------------------------------- export default function PCRAnimation() { // --- State Management --- const [scene, setScene] = useState('prep'); // prep, pcr, gel // Prep Scene State const [addedReagents, setAddedReagents] = useState(0); // PCR Scene State const [cycleCount, setCycleCount] = useState(0); const [pcrPhaseIdx, setPcrPhaseIdx] = useState(0); const [temperature, setTemperature] = useState(25); const [dnaOpenAmount, setDnaOpenAmount] = useState(0); // 0 = closed, 1 = open const [primerProgress, setPrimerProgress] = useState(0); // 0 to 1 const [extensionProgress, setExtensionProgress] = useState(0); // 0 to 1 // Gel Scene State const [gelProgress, setGelProgress] = useState(0); // Animation Refs const requestRef = useRef(); const timeRef = useRef(0); // --- Animation Loop Director --- useEffect(() => { let mounted = true; const runSequence = async () => { // 1. PREP SCENE (Mixing) setScene('prep'); for (let i = 0; i <= REAGENTS.length; i++) { if (!mounted) return; setAddedReagents(i); await new Promise(r => setTimeout(r, 800)); } await new Promise(r => setTimeout(r, 1000)); // 2. PCR SCENE setScene('pcr'); // Pre-denaturation setPcrPhaseIdx(0); animateTemp(25, 94, 1000); await new Promise(r => setTimeout(r, 2000)); // Hold 94 // Cycles (Simulate 3 visually, count to 30) for (let c = 1; c <= 30; c++) { if (!mounted) return; setCycleCount(c); // Fast forward logic for middle cycles const isVisualCycle = c <= 2 || c === 30; const speedFactor = isVisualCycle ? 1 : 0.1; // Denaturation (94) setPcrPhaseIdx(1); setTemperature(94); animateValue(setDnaOpenAmount, 0, 1, 500 * speedFactor); setPrimerProgress(0); setExtensionProgress(0); await new Promise(r => setTimeout(r, isVisualCycle ? 1000 : 100)); // Annealing (56) setPcrPhaseIdx(2); animateTemp(94, 56, 500 * speedFactor); await new Promise(r => setTimeout(r, 500 * speedFactor)); // Wait for temp animateValue(setPrimerProgress, 0, 1, 500 * speedFactor); await new Promise(r => setTimeout(r, isVisualCycle ? 1000 : 100)); // Extension (72) setPcrPhaseIdx(3); animateTemp(56, 72, 500 * speedFactor); await new Promise(r => setTimeout(r, 500 * speedFactor)); animateValue(setExtensionProgress, 0, 1, 1000 * speedFactor); await new Promise(r => setTimeout(r, isVisualCycle ? 1000 : 100)); // Reset DNA for next cycle visually if (c < 30) { setDnaOpenAmount(0); setPrimerProgress(0); setExtensionProgress(0); } } // Final Extension setPcrPhaseIdx(4); setTemperature(72); await new Promise(r => setTimeout(r, 1500)); // Hold setPcrPhaseIdx(5); animateTemp(72, 4, 1000); await new Promise(r => setTimeout(r, 1500)); // 3. GEL SCENE setScene('gel'); animateValue(setGelProgress, 0, 1, 4000); await new Promise(r => setTimeout(r, 6000)); // Restart if (mounted) runSequence(); }; runSequence(); return () => { mounted = false; }; }, []); // Helper to animate temperature smoothly const animateTemp = (start: number, end: number, duration: number) => { const startTime = performance.now(); const animate = (currentTime: number) => { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); // Ease out quart const ease = 1 - Math.pow(1 - progress, 4); setTemperature(start + (end - start) * ease); if (progress < 1) { requestAnimationFrame(animate); } }; requestAnimationFrame(animate); }; // Generic value animator const animateValue = (setter: (v: number) => void, start: number, end: number, duration: number) => { const startTime = performance.now(); const animate = (currentTime: number) => { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const ease = 1 - Math.pow(1 - progress, 3); // Cubic ease out setter(start + (end - start) * ease); if (progress < 1) requestAnimationFrame(animate); }; requestAnimationFrame(animate); }; // Continuous animation loop for subtle effects (floating, waving) useEffect(() => { const animate = (time: number) => { timeRef.current = time; requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); return (

); } // ---------------------------------------------------------------------- // 子组件：DNA 动态绘制 // ---------------------------------------------------------------------- const DNAStrand = ({ y, openAmount, primerProgress, extensionProgress, time, temp }: any) => { const points = 80; const width = 800; const startX = (VIEW_WIDTH - width) / 2; // Base parameters const freq = 0.05; const amp = 20; const speed = 0.005; // Generate path data const topStrand = []; const bottomStrand = []; const bases = []; for (let i = 0; i < points; i++) { const x = startX + (i / points) * width; const xRel = i * 15; // relative for sine calc // Base sine wave const waveY = Math.sin(xRel * freq + time * speed) * amp; // Separation logic (Denaturation) // Center of DNA opens up more than ends const centerFactor = 1 - Math.abs((i - points/2) / (points/2)); const separation = openAmount * 60 * Math.pow(centerFactor, 0.5); const yTop = y + waveY - 10 - separation; const yBot = y + waveY + 10 + separation; topStrand.push(`${x},${yTop}`); bottomStrand.push(`${x},${yBot}`); // Bases (rungs of the ladder) if (i % 2 === 0 && openAmount < 0.8) { bases.push( ); } } // Primer Logic (Annealing) // Primers attach at specific regions (e.g., 20% and 80%) const primerWidth = 60; const p1Idx = Math.floor(points * 0.2); const p2Idx = Math.floor(points * 0.8); const renderPrimer = (idx: number, isTop: boolean) => { if (primerProgress <= 0.1) return null; const x = startX + (idx / points) * width; const xRel = idx * 15; const waveY = Math.sin(xRel * freq + time * speed) * amp; const centerFactor = 1 - Math.abs((idx - points/2) / (points/2)); const separation = openAmount * 60 * Math.pow(centerFactor, 0.5); const yPos = isTop ? y + waveY - 10 - separation : y + waveY + 10 + separation; // Fade in const opacity = primerProgress; return ( Primer ); }; // Extension Logic (New Strand Growth) // Grows from primer towards the other end const renderNewStrand = (startIdx: number, direction: number, isTop: boolean) => { if (extensionProgress <= 0.01) return null; let pathD = ""; const len = Math.floor((points * 0.6) * extensionProgress); // Grow to cover middle for(let k=0; k < len; k++) { const idx = startIdx + (k * direction); if (idx < 0 || idx >= points) continue; const x = startX + (idx / points) * width; const xRel = idx * 15; const waveY = Math.sin(xRel * freq + time * speed) * amp; const centerFactor = 1 - Math.abs((idx - points/2) / (points/2)); const separation = openAmount * 60 * Math.pow(centerFactor, 0.5); // New strand is opposite to template const yPos = isTop ? y + waveY - 10 - separation + 8 : y + waveY + 10 + separation - 8; pathD += `${k===0?'M':'L'} ${x} ${yPos} `; } return ( {/* Polymerase Blob */} {pathD && ( )} ); } return ( {/* Hydrogen Bonds */} {bases} {/* Template Strands */} {/* Primers */} {renderPrimer(p1Idx, false)} {/* Primer on bottom strand */} {renderPrimer(p2Idx, true)} {/* Primer on top strand */} {/* New Strands (Extension) */} {/* From bottom primer (p1), grows right (+1) */} {renderNewStrand(p1Idx, 1, false)} {/* From top primer (p2), grows left (-1) */} {renderNewStrand(p2Idx + (primerWidth/width)*points, -1, true)} {/* Labels */} 5' 3' ); }; ```