'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 遗传学配色方案 const COLORS = { bg: '#ffffff', primary: '#2563EB', // 蓝色 secondary: '#059669', // 绿色 accent: '#7C3AED', // 紫色 text: '#1F2937', grid: '#E5E7EB', bases: { A: '#EF4444', // 腺嘌呤 - 红 T: '#3B82F6', // 胸腺嘧啶 - 蓝 C: '#10B981', // 胞嘧啶 - 绿 G: '#F59E0B', // 鸟嘌呤 - 黄 } }; // 碱基配对规则 const BASE_PAIRS = [ { left: 'A', right: 'T' }, { left: 'T', right: 'A' }, { left: 'C', right: 'G' }, { left: 'G', right: 'C' }, { left: 'A', right: 'T' }, { left: 'G', right: 'C' }, { left: 'T', right: 'A' }, { left: 'C', right: 'G' }, { left: 'A', right: 'T' }, { left: 'T', right: 'A' }, { left: 'G', right: 'C' }, { left: 'C', right: 'G' }, { left: 'A', right: 'T' }, { left: 'T', right: 'A' }, { left: 'C', right: 'G' }, ]; export default function GeneticsAnimation() { const [tick, setTick] = useState(0); const requestRef = useRef(0); const startTimeRef = useRef(0); // 初始化背景粒子 const particles = useMemo(() => { return Array.from({ length: 30 }).map((_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 3 + 1, speed: Math.random() * 0.5 + 0.1, opacity: Math.random() * 0.3 + 0.1, })); }, []); // 动画主循环 useEffect(() => { const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const progress = time - startTimeRef.current; // 使用 useRef 保存的时间差来更新，保证平滑，但为了触发渲染需要 setState // 这里每帧增加一个增量 setTick(progress / 1000); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 计算 DNA 双螺旋位置 const dnaStrand = useMemo(() => { const points = []; const count = 16; // 屏幕上显示的碱基对数量 const spacing = 50; const amplitude = 80; const period = 0.5; // 周期 for (let i = 0; i < count; i++) { points.push({ id: i, baseIndex: i % BASE_PAIRS.length, xOffset: i * spacing, }); } return { points, amplitude, period, spacing }; }, []); // 渲染辅助函数：生成 DNA 节点 const renderDNA = () => { const centerX = VIEW_WIDTH / 2; const centerY = VIEW_HEIGHT / 2 + 20; const totalWidth = dnaStrand.points.length * dnaStrand.spacing; const startX = centerX - totalWidth / 2; // 随时间移动的相位 const phaseShift = tick * 1.5; return dnaStrand.points.map((pt, i) => { // 计算正弦波位置 const angle = (i * dnaStrand.period) + phaseShift; const yOffset = Math.sin(angle) * dnaStrand.amplitude; const cosVal = Math.cos(angle); // 用于计算深度 (z-index模拟) // 深度模拟：缩放和透明度 const scale = 0.8 + (cosVal * 0.3); // 0.5 ~ 1.1 const opacity = 0.6 + (cosVal + 1) * 0.2; // 模拟远近清晰度 const isFront = cosVal > 0; // 判断哪条链在前面 const x = startX + pt.xOffset; const y1 = centerY + yOffset; // 链1 const y2 = centerY - yOffset; // 链2 (反相) const pair = BASE_PAIRS[pt.baseIndex]; // 构建 SVG 元素 // 连接线 (氢键) const connector = ( ); // 节点生成函数 const createNode = (y, base, isTop) => { const color = COLORS.bases[base]; return ( {/* 光晕 */} {/* 核心 */} {/* 文字 */} {base} ); }; const node1 = createNode(y1, pair.left, true); const node2 = createNode(y2, pair.right, false); // 根据深度排序渲染，保证3D遮挡关系的视觉正确性 return ( {connector} {isFront ? ( <> {node2} {node1} ) : ( <> {node1} {node2} )} ); }); }; // 渲染背景网格 const renderGrid = () => { const lines = []; const gridSize = 50; // 简单的透视网格效果 for (let i = 0; i <= VIEW_WIDTH / gridSize; i++) { lines.push( ); } for (let i = 0; i <= VIEW_HEIGHT / gridSize; i++) { lines.push( ); } return lines; }; return ( ); }