```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 粒子组件：背景漂浮的微粒 const Particle = ({ x, y, size, opacity }) => ( ); export const CovalentBondView = () => { // 动画状态 // phase: 0-1 (approaching), 1-2 (bonding/stabilizing), 2-3 (holding), 3-4 (resetting) const [time, setTime] = useState(0); const [atomDistance, setAtomDistance] = useState(300); const [energyLevel, setEnergyLevel] = useState(0); const [bondStrength, setBondStrength] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 生成背景粒子 const particles = useMemo(() => { return Array.from({ length: 30 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 1.5 + 0.5, baseOpacity: Math.random() * 0.3 + 0.1, speed: Math.random() * 0.5 + 0.1, })); }, []); // 动画循环 const animate = () => { const now = Date.now(); const elapsed = (now - startTimeRef.current) / 1000; // seconds setTime(elapsed); // 定义动画周期 (8秒一个周期) const cycle = elapsed % 8; let currentDist = 300; let currentEnergy = 0; let strength = 0; if (cycle < 3) { // 阶段1：靠近 (0s - 3s) // Ease out cubic const t = cycle / 3; const ease = 1 - Math.pow(1 - t, 3); currentDist = 300 - (ease * 180); // 300 -> 120 currentEnergy = -10 * ease; // Energy starts dropping } else if (cycle < 6) { // 阶段2：成键稳定 (3s - 6s) // 呼吸效果 const t = cycle - 3; currentDist = 120 + Math.sin(t * 4) * 5; currentEnergy = -436 + Math.sin(t * 4) * 10; // kJ/mol strength = 1; } else { // 阶段3：重置/分离 (6s - 8s) const t = (cycle - 6) / 2; const ease = t * t; currentDist = 120 + (ease * 180); currentEnergy = -436 * (1 - ease); strength = 1 - ease; } setAtomDistance(currentDist); setEnergyLevel(currentEnergy); setBondStrength(strength); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // 计算原子位置 const leftAtomX = CENTER_X - atomDistance / 2; const rightAtomX = CENTER_X + atomDistance / 2; // 电子轨道计算 const electronAngle = time * 5; // speed // 颜色定义 const colors = { bg: '#0f172a', cyan: '#06b6d4', cyanGlow: 'rgba(6, 182, 212, 0.6)', purple: '#a855f7', purpleGlow: 'rgba(168, 85, 247, 0.6)', white: '#ffffff', text: '#94a3b8', grid: '#1e293b' }; return ( ); }; ```