```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 = 35; // 延长动画时间以展示细节 // --- 数学工具函数 --- 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 randomRange = (min, max) => Math.random() * (max - min) + min; export const CellDifferentiationAnim = () => { const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // --- 静态数据初始化 (useMemo) --- const data = useMemo(() => { // 背景粒子 (模拟体内环境/星空) const bgParticles = Array.from({ length: 60 }).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, speed: Math.random() * 0.2 + 0.05 })); // 血红蛋白 (RBC内部) const hemoglobin = Array.from({ length: 100 }).map((_, i) => ({ id: i, angle: Math.random() * Math.PI * 2, radius: Math.random() * 75, speed: 0.5 + Math.random(), offset: Math.random() * 10 })); // 溶酶体/颗粒 (WBC内部) const granules = Array.from({ length: 40 }).map((_, i) => ({ id: i, x: (Math.random() - 0.5) * 120, y: (Math.random() - 0.5) * 120, r: 2 + Math.random() * 3, type: Math.random() > 0.5 ? 'A' : 'B', // A: 酶, B: 信号物质 })); // 氧气分子 (环境) const oxygen = Array.from({ length: 25 }).map((_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: randomRange(CELL_Y - 100, CELL_Y + 100), speed: randomRange(80, 150), offsetY: randomRange(-20, 20) })); // 细菌 (WBC的目标) const bacteria = Array.from({ length: 8 }).map((_, i) => ({ id: i, angle: (i / 8) * Math.PI * 2, dist: 180 + Math.random() * 50, wobble: Math.random() * Math.PI })); // DNA 碱基对位置 (用于细胞核内展示) const dnaBasePairs = Array.from({ length: 12 }).map((_, i) => ({ y: -25 + i * 4.5, width: 10 + Math.sin(i) * 5 })); return { bgParticles, hemoglobin, granules, oxygen, bacteria, dnaBasePairs }; }, []); // --- 动画循环 --- 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: 干细胞形态 (Stem) // 5-12s: 基因选择性表达 (Gene Expression) // 12-22s: 形态重塑 (Morphing / Nucleus Ejection) // 22-35s: 功能行使 (Function) const genePhase = smoothstep(5, 11, time); // 基因表达强度 const morphPhase = smoothstep(12, 20, time); // 变形程度 const funcPhase = smoothstep(22, 26, time); // 功能展示强度 // --- 动态逻辑: 左侧细胞 (红细胞 RBC) --- // 颜色: 紫色 -> 红色 const rbcR = mix(168, 239, morphPhase); const rbcG = mix(85, 68, morphPhase); const rbcB = mix(247, 68, morphPhase); const rbcFill = `rgb(${rbcR}, ${rbcG}, ${rbcB})`; // 形状: 圆形 -> 扁平 (模拟双凹圆饼的侧视图/俯视图混合效果) // 通过改变 scaleY 和增加内部阴影来模拟 const rbcScaleY = mix(1, 0.9, morphPhase); const concaveOpacity = mix(0, 0.6, morphPhase); // 中间凹陷阴影 // 细胞核: 逐渐变小并移出 const nucEjectStart = 13; const nucEjectEnd = 17; const nucEjectProgress = smoothstep(nucEjectStart, nucEjectEnd, time); const nucOffsetY = mix(0, -250, nucEjectProgress); // 向上排出 const nucOpacity = mix(1, 0, smoothstep(nucEjectEnd - 1, nucEjectEnd + 2, time)); // 排出后消失 const nucScale = mix(1, 0.2, nucEjectProgress); // --- 动态逻辑: 右侧细胞 (白细胞 WBC) --- // 颜色: 紫色 -> 灰白色/淡蓝 const wbcR = mix(168, 241, morphPhase); const wbcG = mix(85, 245, morphPhase); const wbcB = mix(247, 249, morphPhase); const wbcFill = `rgb(${wbcR}, ${wbcG}, ${wbcB})`; // 形状: 变形虫运动 (Amoeboid movement) const generateWbcPath = (t) => { const points = 16; let d = ""; const baseRadius = 105; for (let i = 0; i <= points; i++) { const angle = (i / points) * Math.PI * 2; // 随着 morphPhase 增加，波动幅度变大 const noise = Math.sin(angle * 4 + t * 2) * Math.cos(angle * 3 - t) * (20 * morphPhase); const r = baseRadius + 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 = generateWbcPath(time); // --- 辅助绘图组件 --- // DNA 双螺旋示意图 (位于细胞核内) const renderDNA = (isActive, type) => { // type: 'hemoglobin' (Top active) or 'receptor' (Bottom active) const color = type === 'hemoglobin' ? '#ef4444' : '#38bdf8'; return ( {data.dnaBasePairs.map((bp, i) => { // 判断该基因片段是否被激活 const isTargetGene = type === 'hemoglobin' ? i < 4 : i > 7; const active = isActive && isTargetGene; return ( {active && } ); })} ); }; // 状态文本 let statusTitle = "阶段 I: 造血干细胞 (Hematopoietic Stem Cell)"; let statusDesc = "全能性 | 基因组静默 | 形态未分化"; if (time > 5 && time <= 12) { statusTitle = "阶段 II: 基因选择性表达 (Selective Expression)"; statusDesc = "接收特定信号 -> 转录因子激活 -> 差异化蛋白合成"; } else if (time > 12 && time <= 22) { statusTitle = "阶段 III: 形态与结构重塑 (Morphogenesis)"; statusDesc = "红细胞: 排出细胞核 | 白细胞: 细胞骨架重组"; } else if (time > 22) { statusTitle = "阶段 IV: 功能特化 (Specialization)"; statusDesc = "红细胞: 运输氧气 | 白细胞: 免疫吞噬"; } return (

); }; ```