import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 600; const BG_COLOR = "#0f172a"; // 颜色定义 const COLORS = { brain: "rgba(56, 189, 248, 0.3)", brainHighlight: "rgba(56, 189, 248, 0.8)", dopamineNormal: "#38bdf8", // 淡蓝 dopamineHigh: "#fbbf24", // 金色 drug: "#a855f7", // 紫色 drugToxic: "#22c55e", // 毒性绿 receptor: "#94a3b8", receptorActive: "#cbd5e1", damaged: "#475569", }; // 粒子类定义 class Particle { constructor(type, x, y, targetX, targetY) { this.id = Math.random().toString(36).substr(2, 9); this.type = type; // 'dopamine', 'drug', 'spark' this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 2; this.vy = (Math.random() * 2) + 1; this.radius = type === 'dopamine' ? 4 : (type === 'spark' ? 2 : 8); this.life = 1.0; this.targetX = targetX; this.targetY = targetY; this.state = 'falling'; // falling, bound, recycling, blocked } } export const AddictionMechanismView = () => { // 动画核心状态 const [phase, setPhase] = useState(0); // 0: Macro, 1: Normal, 2: Drug Entry, 3: High, 4: Damage const [frame, setFrame] = useState(0); // 用于触发渲染 // 引用保持数据跨帧持久化 const particlesRef = useRef([]); const timeRef = useRef(0); const rafRef = useRef(null); const phaseTimerRef = useRef(0); // 阶段描述文案 const phaseInfo = useMemo(() => { switch(phase) { case 0: return { title: "大脑边缘系统 (Macro View)", sub: "正常生理状态：中脑腹侧被盖区 -> 伏隔核" }; case 1: return { title: "突触间隙 (Synapse)", sub: "多巴胺正常释放与回收，维持情绪平衡" }; case 2: return { title: "外源性介入 (Intrusion)", sub: "类阿片/兴奋剂分子伪装进入，抢占转运体" }; case 3: return { title: "奖赏回路过载 (Overload)", sub: "回收泵被阻断，多巴胺激增，产生剧烈快感" }; case 4: return { title: "耐受与损伤 (Tolerance)", sub: "受体下调，神经突触萎缩，脱敏反应" }; default: return { title: "", sub: "" }; } }, [phase]); // 初始化与主循环 useEffect(() => { const loop = () => { timeRef.current += 1; phaseTimerRef.current += 1; // 阶段控制逻辑 (简单的时间状态机) const t = phaseTimerRef.current; if (phase === 0 && t > 300) { setPhase(1); phaseTimerRef.current = 0; } if (phase === 1 && t > 400) { setPhase(2); phaseTimerRef.current = 0; } if (phase === 2 && t > 300) { setPhase(3); phaseTimerRef.current = 0; } if (phase === 3 && t > 400) { setPhase(4); phaseTimerRef.current = 0; } if (phase === 4 && t > 400) { // 重置 setPhase(0); phaseTimerRef.current = 0; particlesRef.current = []; } updateParticles(); setFrame(prev => prev + 1); rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafRef.current); }, [phase]); // 粒子系统更新逻辑 const updateParticles = () => { // 1. 生成新粒子 if (phase >= 1 && phase <= 4) { const spawnRate = phase === 3 ? 0.8 : (phase === 4 ? 0.1 : 0.3); if (Math.random() < spawnRate) { // 多巴胺 const x = WIDTH/2 + (Math.random() - 0.5) * 200; particlesRef.current.push(new Particle('dopamine', x, 180, x, 450)); } if (phase === 2 && Math.random() < 0.1) { // 药物分子 const x = WIDTH/2 + (Math.random() - 0.5) * 250; particlesRef.current.push(new Particle('drug', x, 100, 0, 0)); } } // 2. 更新位置与状态 const particles = particlesRef.current; const pumps = [-80, 0, 80]; // 回收泵相对于中心的X偏移 for (let i = particles.length - 1; i >= 0; i--) { const p = particles[i]; // 运动逻辑 if (p.state === 'falling') { p.y += p.vy * (phase === 3 ? 1.5 : 1); // 爆发期加速 p.x += Math.sin(timeRef.current * 0.05 + p.id) * 0.5; // 药物逻辑：寻找回收泵 if (p.type === 'drug' && p.y > 180) { // 简化的吸附逻辑 const pumpX = WIDTH/2 + pumps[Math.floor(Math.random() * 3)]; const dx = pumpX - p.x; const dy = 190 - p.y; p.x += dx * 0.1; p.y += dy * 0.1; if (Math.abs(dx) < 5 && Math.abs(dy) < 5) { p.state = 'blocking'; p.x = pumpX; p.y = 190; } } // 多巴胺逻辑：触底 if (p.type === 'dopamine' && p.y > 420) { p.y = 420; p.state = 'bound'; p.life = 100; // 停留时间 } } else if (p.state === 'bound') { p.life--; // 正常回收机制 if (p.life <= 0) { if (phase === 1) { p.state = 'recycling'; } else if (phase === 3) { // 成瘾期：无法回收，堆积 p.state = 'stuck'; p.vx = (Math.random() - 0.5) * 2; p.vy = (Math.random() - 0.5) * 2; } else if (phase === 4) { p.state = 'recycling'; // 耐受期少量回收 } else { p.state = 'recycling'; } } } else if (p.state === 'recycling') { // 飘回突触前膜 const pumpX = WIDTH/2; const dx = pumpX - p.x; const dy = 180 - p.y; p.x += dx * 0.02; p.y += dy * 0.02; p.radius *= 0.95; if (p.radius < 0.5) p.life = -1; // 销毁 } else if (p.state === 'stuck') { // 堆积乱窜 p.x += p.vx; p.y += p.vy; // 边界限制 if (p.x < WIDTH/2 - 150 || p.x > WIDTH/2 + 150) p.vx *= -1; if (p.y < 250 || p.y > 450) p.vy *= -1; // 闪光特效 if (Math.random() < 0.01) p.radius = 8; else p.radius = 4; } // 销毁越界或死亡粒子 if (p.y > HEIGHT + 50 || p.life < 0) { particles.splice(i, 1); } } }; // --- SVG 路径生成 --- // 大脑轮廓 const brainPath = "M400,300 C400,150 550,100 650,100 C750,100 850,150 850,250 C850,280 830,300 820,320 C850,350 850,450 750,500 C650,540 500,500 450,400 C420,420 400,380 400,300 Z"; // 奖赏回路路径 const rewardPath = "M600,420 Q650,380 720,350 T780,280"; // 突触前膜 (上) const presynapticPath = ` M ${WIDTH/2 - 200}, 0 L ${WIDTH/2 - 200}, 100 Q ${WIDTH/2 - 200}, 200 ${WIDTH/2 - 100}, 200 L ${WIDTH/2 + 100}, 200 Q ${WIDTH/2 + 200}, 200 ${WIDTH/2 + 200}, 100 L ${WIDTH/2 + 200}, 0 Z `; // 突触后膜 (下) const postsynapticPath = ` M ${WIDTH/2 - 250}, 600 L ${WIDTH/2 - 250}, 500 Q ${WIDTH/2 - 250}, 420 ${WIDTH/2 - 150}, 420 L ${WIDTH/2 + 150}, 420 Q ${WIDTH/2 + 250}, 420 ${WIDTH/2 + 250}, 500 L ${WIDTH/2 + 250}, 600 Z `; // --- 视觉计算 --- // 缩放与平移控制 const getTransform = () => { if (phase === 0) return `translate(0, 0) scale(1)`; // 放大并聚焦到突触位置 return `translate(${-WIDTH/2 + WIDTH/2}, 0) scale(1)`; }; const globalOpacity = phase === 0 ? 1 : 0; const microOpacity = phase === 0 ? 0 : 1; const shake = phase === 2 || phase === 3 ? Math.sin(timeRef.current * 0.8) * 5 : 0; const damageFilter = phase === 4 ? "url(#noise)" : "none"; return (

); };