```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; // ---------------------------------------------------------------------- // 辅助函数与常量 // ---------------------------------------------------------------------- const COLORS = { bg: '#0f172a', grid: '#1e293b', text: '#94a3b8', highlight: '#38bdf8', // Cyan 400 carbon: '#334155', // Slate 700 oxygen: '#ef4444', // Red 500 nitrogen: '#3b82f6', // Blue 500 hydrogen: '#f8fafc', // Slate 50 bond: '#64748b', // Slate 500 electron: '#fbbf24', // Amber 400 }; // 简单的缓动函数 const easeInOutCubic = (t) => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; // 向量线性插值 const lerp = (v0, v1, t) => v0 * (1 - t) + v1 * t; // ---------------------------------------------------------------------- // 组件主体 // ---------------------------------------------------------------------- export default function AmideHydrolysisAnimation() { // 动画进度状态: 0 ~ 100 const [progress, setProgress] = useState(0); const [phase, setPhase] = useState('APPROACH'); // APPROACH, REACTION, SEPARATION, RESET const requestRef = useRef(); // 动画循环逻辑 useEffect(() => { let startTime; const duration = 8000; // 完整周期8秒 const animate = (time) => { if (!startTime) startTime = time; const elapsed = time - startTime; let p = (elapsed % duration) / duration; // 稍微停顿在结束状态 if (p > 0.85) p = 0.85; // 阶段判断用于文字显示 if (p < 0.25) setPhase('APPROACH'); else if (p < 0.55) setPhase('REACTION'); else setPhase('SEPARATION'); if (elapsed > duration) { startTime = time; // Loop } setProgress(p); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // ---------------------------------------------------------------------- // 原子位置计算逻辑 // ---------------------------------------------------------------------- const atoms = useMemo(() => { // 基础坐标 const cx = VIEW_WIDTH / 2; const cy = VIEW_HEIGHT / 2; // 阶段性时间因子 (0-1 within specific ranges) // t1: 接近阶段 (0 -> 0.3) const t1 = Math.min(Math.max(progress / 0.3, 0), 1); const easedT1 = easeInOutCubic(t1); // t2: 反应/重组阶段 (0.3 -> 0.6) const t2 = Math.min(Math.max((progress - 0.3) / 0.3, 0), 1); const easedT2 = easeInOutCubic(t2); // t3: 分离阶段 (0.6 -> 0.9) const t3 = Math.min(Math.max((progress - 0.6) / 0.3, 0), 1); const easedT3 = easeInOutCubic(t3); // --- 初始位置定义 (酰胺) --- // Carbon (Center) const pC = { x: cx, y: cy }; // Oxygen (Double bond top) const pO_amide = { x: cx, y: cy - 60 }; // Nitrogen (Right) const pN = { x: cx + 60, y: cy + 30 }; // R1 (Left - Methyl representation) const pR1 = { x: cx - 60, y: cy + 30 }; // H on N (Below N) const pH_amide = { x: cx + 60, y: cy + 80 }; // R2 on N (Right of N) const pR2 = { x: cx + 110, y: cy + 10 }; // --- 水分子初始位置 (从左下角进入) --- const startWaterX = cx - 150; const startWaterY = cy + 150; const pOw = { x: lerp(startWaterX, cx, easedT1), y: lerp(startWaterY, cy + 70, easedT1) }; const pHw1 = { // Remains on O x: pOw.x - 25, y: pOw.y + 25 }; const pHw2 = { // Migrates to N x: pOw.x + 25, y: pOw.y + 25 }; // --- 反应过程变换 --- // 1. 水氧连接到碳 (Transition State) - 在 t2 阶段微调位置 // 实际上由 pOw 的 lerp 已经处理了接近，这里处理四面体中间体构型 if (t2 > 0) { // 碳稍微上移一点适应四面体 pC.y = lerp(cy, cy - 10, easedT2); // 羰基氧向左上倾斜 (变成单键/OH) pO_amide.x = lerp(cx, cx - 40, easedT2); pO_amide.y = lerp(cy - 60, cy - 70, easedT2); // 胺基氮向右移动 (准备断裂) pN.x = lerp(cx + 60, cx + 80, easedT2); // 水的氧移动到碳下方 pOw.x = lerp(cx, cx, easedT2); pOw.y = lerp(cy + 70, cy + 50, easedT2); // 关键：质子转移 (Hw2 从 Water 移动到 Nitrogen) // 起点是水的右侧，终点是氮的下方(原本H_amide的位置附近) const targetHw2X = pN.x - 10; const targetHw2Y = pN.y + 40; pHw2.x = lerp(pOw.x + 25, targetHw2X, easedT2); pHw2.y = lerp(pOw.y + 25, targetHw2Y, easedT2); // 随动 pHw1.x = pOw.x - 20; pHw1.y = pOw.y + 25; pR1.x = pC.x - 60; pR1.y = pC.y + 30; pH_amide.x = pN.x + 10; pH_amide.y = pN.y + 45; // 原来的H稍微挪一下 pR2.x = pN.x + 50; pR2.y = pN.y - 10; } // 2. 分离阶段 (Products separate) if (t3 > 0) { // 羧酸 (左侧产物) 向左漂移 const driftLeft = 100 * easedT3; pC.x -= driftLeft; pO_amide.x -= driftLeft; pR1.x -= driftLeft; pOw.x -= driftLeft; pHw1.x -= driftLeft; // 胺 (右侧产物) 向右漂移 const driftRight = 100 * easedT3; pN.x += driftRight; pR2.x += driftRight; pH_amide.x += driftRight; pHw2.x += driftRight; // 转移过来的H跟着胺走 } return { C: pC, O_amide: pO_amide, N: pN, R1: pR1, H_amide: pH_amide, R2: pR2, Ow: pOw, Hw1: pHw1, Hw2: pHw2 }; }, [progress]); // ---------------------------------------------------------------------- // 渲染组件 // ---------------------------------------------------------------------- // 动态生成键的透明度和样式 const getBondStyles = () => { // 0-0.3: Approach // 0.3-0.6: Reaction (C-N breaks, C-Ow forms, Ow-Hw2 breaks, N-Hw2 forms) // 0.6-1.0: Separation let cnOpacity = 1; let cOwOpacity = 0; let owHw2Opacity = 1; let nHw2Opacity = 0; let coDoubleBond = true; // C=O to C-OH transition // t2 range logic if (progress > 0.3) { const t = Math.min((progress - 0.3) / 0.3, 1); // C-N 断裂 cnOpacity = 1 - t; // C-Ow 形成 (实际上接近时就开始形成虚线，这里简化) cOwOpacity = t; // Ow-Hw2 断裂 owHw2Opacity = 1 - t; // N-Hw2 形成 nHw2Opacity = t; if (progress > 0.45) coDoubleBond = false; // 变成单键视效 } return { cnOpacity, cOwOpacity, owHw2Opacity, nHw2Opacity, coDoubleBond }; }; const bonds = getBondStyles(); return (

); } ```