```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- 常量定义 --- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const LEFT_CENTER_X = VIEW_WIDTH * 0.25; const RIGHT_CENTER_X = VIEW_WIDTH * 0.75; const CELL_Y = VIEW_HEIGHT / 2; const DURATION = 45; // 延长一点以展示完整细节 // --- 数学工具 --- const clamp = (val, min, max) => Math.min(Math.max(val, min), max); const smoothstep = (min, max, value) => { const x = clamp((value - min) / (max - min), 0, 1); return x * x * (3 - 2 * x); }; const mix = (a, b, t) => a * (1 - t) + b * t; // 伪随机生成器 (确定性) const pseudoRandom = (seed) => { const x = Math.sin(seed) * 10000; return x - Math.floor(x); }; export const SelectiveGeneExpressionAnim = () => { const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // --- 数据初始化 (只执行一次) --- const data = useMemo(() => { // 背景粒子 const bgParticles = Array.from({ length: 40 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, alpha: Math.random() * 0.4 + 0.1, })); // 红细胞：血红蛋白 (Hemoglobin) - 初始不存在 // 它们将在细胞质中被合成 const hemoglobin = Array.from({ length: 80 }).map((_, i) => { const angle = pseudoRandom(i) * Math.PI * 2; const dist = pseudoRandom(i + 100) * 90; // 细胞内分布 return { id: i, x: Math.cos(angle) * dist, y: Math.sin(angle) * dist, rotation: pseudoRandom(i + 200) * 360, appearDelay: i * 0.1, // 错开出现时间 }; }); // 白细胞：肌动蛋白 (Actin) - 细胞骨架 const actin = Array.from({ length: 50 }).map((_, i) => { const angle = pseudoRandom(i + 500) * Math.PI * 2; const dist = pseudoRandom(i + 600) * 80; return { id: i, x: Math.cos(angle) * dist, y: Math.sin(angle) * dist, length: 15 + pseudoRandom(i + 700) * 15, rotation: pseudoRandom(i + 800) * 360, appearDelay: i * 0.15, }; }); // mRNA 流 (从核孔流出) const mrnaStream = Array.from({ length: 20 }).map((_, i) => ({ id: i, delay: i * 0.5, angleOffset: (Math.random() - 0.5) * 1, })); return { bgParticles, hemoglobin, actin, mrnaStream }; }, []); // --- 动画主循环 --- useEffect(() => { const animate = (now) => { if (!startTimeRef.current) startTimeRef.current = now; const elapsed = (now - startTimeRef.current) / 1000; if (elapsed < DURATION) { setTime(elapsed); requestRef.current = requestAnimationFrame(animate); } else { setTime(DURATION); } }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // --- 阶段计算 --- // 0-5s: 初始状态 & 信号识别 // 5-12s: 基因激活 & 转录 (Transcription) // 12-25s: 翻译 & 蛋白质合成 (Translation) -> 关键点：从无到有 // 25-35s: 形态改变 (Morphing) // 35-45s: 功能行使 (Function) const signalPhase = smoothstep(1, 5, time); const transcriptionPhase = smoothstep(5, 12, time); const translationPhase = smoothstep(12, 25, time); const morphPhase = smoothstep(25, 35, time); const funcPhase = smoothstep(35, 42, time); // --- 动态变量 --- // RBC 变量 const rbcColor = `rgb(${mix(100, 220, morphPhase)}, ${mix(116, 50, morphPhase)}, ${mix(139, 50, morphPhase)})`; // 灰蓝 -> 红 const rbcScaleY = mix(1, 0.7, morphPhase); // 变扁 const nucOffsetY = mix(0, -250, smoothstep(28, 32, time)); // 排核 const nucOpacity = mix(1, 0, smoothstep(30, 32, time)); // WBC 变量 const wbcColor = `rgb(${mix(100, 56, morphPhase)}, ${mix(116, 189, morphPhase)}, ${mix(139, 248, morphPhase)})`; // 灰蓝 -> 青亮 // WBC 变形路径计算 const getWbcPath = (t, intensity) => { const points = 16; let d = ""; const rBase = 110; for (let i = 0; i <= points; i++) { const angle = (i / points) * Math.PI * 2; // 随着肌动蛋白增多，变形幅度增大 const noise = Math.sin(angle * 4 + t * 2) * Math.cos(angle * 3 - t) * (5 + 40 * intensity); const r = rBase + noise; const x = Math.cos(angle) * r; const y = Math.sin(angle) * r; d += (i === 0 ? "M" : "L") + `${x.toFixed(1)},${y.toFixed(1)} `; } return d + "Z"; }; const wbcPath = getWbcPath(time, morphPhase); // --- 子组件：基因表达视图 (放大镜效果) --- const GeneExpressionView = ({ type, x, y, active, producing }) => { const color = type === 'rbc' ? '#ef4444' : '#38bdf8'; const geneName = type === 'rbc' ? '血红蛋白基因' : '肌动蛋白基因'; const scale = active ? 1 : 0; return ( {/* 连接线 */} {/* 气泡背景 */} {/* DNA 螺旋示意 */} {active && } {/* 转录出的 mRNA */} {producing > 0.1 && data.mrnaStream.map((m) => { const localT = (time - 5 - m.delay) % 3; // 循环流动 if (localT < 0) return null; const dist = localT * 25; const alpha = 1 - localT / 3; return ( ); })} {geneName} ON 转录 (Transcription) ); }; // --- UI 文字内容 --- let stepTitle = "阶段 1: 信号接收"; let stepDesc = "干细胞接收环境中的特异性化学信号"; if (time > 5 && time <= 12) { stepTitle = "阶段 2: 基因激活 & 转录"; stepDesc = "特定的基因片段解旋，转录生成 mRNA"; } else if (time > 12 && time <= 25) { stepTitle = "阶段 3: 蛋白质合成 (翻译)"; stepDesc = "核糖体读取 mRNA，合成特异性蛋白质"; } else if (time > 25 && time <= 35) { stepTitle = "阶段 4: 细胞形态改变"; stepDesc = "蛋白质的积累和组装改变了细胞的物理结构"; } else if (time > 35) { stepTitle = "阶段 5: 功能特化"; stepDesc = "成熟细胞执行其特定的生理功能"; } return (

); }; ```