'use client'; import React, { useEffect, useRef } from 'react'; /** * 创意说明： * 该动画将“性交过程”这一生物学行为抽象为微观视角下的“受精过程”（Fertilization Process）。 * 这种处理方式既符合科学/科技感的视觉要求，又富有教育意义和艺术美感。 * * 视觉风格： * - 充满科技感的生物微观世界。 * - 粒子系统模拟精子游动。 * - 柔光与光晕效果模拟细胞质感。 * - 动态展示精子竞争、接触透明带、顶体反应及最终融合的瞬间。 */ const BACKGROUND_COLOR = '#0f172a'; const EGG_COLOR_CORE = '#fb7185'; // 玫瑰粉 const EGG_COLOR_OUTER = '#f43f5e'; const SPERM_COLOR = '#38bdf8'; // 天空蓝 const SPERM_HEAD_COLOR = '#e0f2fe'; const GLOW_COLOR = '#ffffff'; export default function BiologicalProcessView() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationFrameId: number; let width = canvas.width; let height = canvas.height; // 状态管理 let phase: 'APPROACH' | 'CONTACT' | 'FUSION' | 'SUCCESS' = 'APPROACH'; let time = 0; let particles: Particle[] = []; let sperms: Sperm[] = []; let egg: Egg; let shockwaves: Shockwave[] = []; // 辅助函数 const random = (min: number, max: number) => Math.random() * (max - min) + min; const dist = (x1: number, y1: number, x2: number, y2: number) => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); // 类定义 class Shockwave { x: number; y: number; radius: number; opacity: number; constructor(x: number, y: number) { this.x = x; this.y = y; this.radius = 0; this.opacity = 1; } update() { this.radius += 5; this.opacity -= 0.02; } draw(ctx: CanvasRenderingContext2D) { if (this.opacity <= 0) return; ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.strokeStyle = `rgba(255, 255, 255, ${this.opacity})`; ctx.lineWidth = 3; ctx.stroke(); ctx.restore(); } } class Particle { x: number; y: number; vx: number; vy: number; life: number; color: string; constructor(x: number, y: number, color: string) { this.x = x; this.y = y; const angle = random(0, Math.PI * 2); const speed = random(1, 4); this.vx = Math.cos(angle) * speed; this.vy = Math.sin(angle) * speed; this.life = 1.0; this.color = color; } update() { this.x += this.vx; this.y += this.vy; this.life -= 0.02; } draw(ctx: CanvasRenderingContext2D) { if (this.life <= 0) return; ctx.globalAlpha = this.life; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1.0; } } class Egg { x: number; y: number; radius: number; pulse: number; glowIntensity: number; constructor() { this.x = width * 0.75; this.y = height / 2; this.radius = 120; this.pulse = 0; this.glowIntensity = 20; } update() { this.pulse += 0.05; // 受精后的反应 if (phase === 'FUSION' || phase === 'SUCCESS') { this.glowIntensity = 50 + Math.sin(this.pulse * 2) * 10; } else { this.glowIntensity = 20 + Math.sin(this.pulse) * 5; } } draw(ctx: CanvasRenderingContext2D) { ctx.save(); // 外部光晕 (Zona Pellucida) ctx.shadowBlur = this.glowIntensity; ctx.shadowColor = EGG_COLOR_OUTER; // 细胞主体 const gradient = ctx.createRadialGradient(this.x, this.y, this.radius * 0.2, this.x, this.y, this.radius); gradient.addColorStop(0, EGG_COLOR_CORE); gradient.addColorStop(0.8, EGG_COLOR_OUTER); gradient.addColorStop(1, 'rgba(244, 63, 94, 0.1)'); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius + Math.sin(this.pulse) * 2, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); // 细胞核 ctx.beginPath(); ctx.arc(this.x, this.y, 30, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctx.fill(); ctx.restore(); } } class Sperm { x: number; y: number; angle: number; speed: number; tail: {x: number, y: number}[]; id: number; isWinner: boolean; stopped: boolean; constructor(id: number, isWinner: boolean = false) { this.id = id; this.x = -random(50, 200); // Start off screen left this.y = random(0, height); this.angle = 0; this.speed = random(3, 5) + (isWinner ? 2 : 0); this.tail = []; this.isWinner = isWinner; this.stopped = false; } update(target: Egg) { if (this.stopped) return; // 计算目标角度 const dx = target.x - this.x; const dy = target.y - this.y; const distToTarget = Math.sqrt(dx * dx + dy * dy); let targetAngle = Math.atan2(dy, dx); // 赢家直接冲向目标，其他人稍微有些随机扰动 if (!this.isWinner) { targetAngle += Math.sin(time * 0.1 + this.id) * 0.5; } // 转向平滑处理 let diff = targetAngle - this.angle; while (diff < -Math.PI) diff += Math.PI * 2; while (diff > Math.PI) diff -= Math.PI * 2; this.angle += diff * 0.05; // 移动 this.x += Math.cos(this.angle) * this.speed; this.y += Math.sin(this.angle) * this.speed; // 尾巴逻辑 this.tail.unshift({x: this.x, y: this.y}); if (this.tail.length > 20) this.tail.pop(); // 碰撞检测 if (distToTarget < target.radius + 10) { if (this.isWinner && phase === 'APPROACH') { phase = 'CONTACT'; this.speed = 0.5; // 减速穿透 // 触发接触动画 setTimeout(() => { phase = 'FUSION'; shockwaves.push(new Shockwave(this.x, this.y)); // 产生粒子 for(let i=0; i<20; i++) { particles.push(new Particle(this.x, this.y, '#fff')); } }, 1000); setTimeout(() => { phase = 'SUCCESS'; this.stopped = true; }, 3000); } else if (!this.isWinner && phase !== 'APPROACH') { // 输家被挡在外面 this.speed = -1; // 弹开 this.angle += Math.PI; } else if (!this.isWinner && distToTarget < target.radius + 15) { this.speed *= -0.5; // 简单的弹开逻辑 } } } draw(ctx: CanvasRenderingContext2D) { // 如果融合了，赢家逐渐消失融入 if (this.isWinner && phase === 'SUCCESS') { ctx.globalAlpha = Math.max(0, 1 - (time % 100) * 0.01); // 简单淡出 } ctx.save(); // 绘制尾巴 (正弦波摆动) ctx.beginPath(); if (this.tail.length > 0) { ctx.moveTo(this.tail[0].x, this.tail[0].y); for (let i = 1; i < this.tail.length; i++) { const p = this.tail[i]; // 摆动幅度随速度和位置变化 const wiggle = Math.sin(time * 0.5 + i * 0.5) * (i * 0.5); // 计算垂直于尾巴方向的偏移 const perpAngle = this.angle + Math.PI / 2; const wx = p.x + Math.cos(perpAngle) * wiggle; const wy = p.y + Math.sin(perpAngle) * wiggle; ctx.lineTo(wx, wy); } } ctx.strokeStyle = SPERM_COLOR; ctx.lineWidth = 2; ctx.stroke(); // 绘制头部 ctx.translate(this.x, this.y); ctx.rotate(this.angle); ctx.beginPath(); ctx.ellipse(0, 0, 8, 4, 0, 0, Math.PI * 2); ctx.fillStyle = SPERM_HEAD_COLOR; ctx.shadowBlur = 10; ctx.shadowColor = SPERM_COLOR; ctx.fill(); ctx.restore(); ctx.globalAlpha = 1.0; } } // 初始化场景 const init = () => { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; // 保持横屏比例，但在组件中自适应 egg = new Egg(); sperms = []; // 创建一个赢家 sperms.push(new Sperm(0, true)); // 创建陪跑者 for (let i = 1; i < 30; i++) { sperms.push(new Sperm(i, false)); } phase = 'APPROACH'; time = 0; shockwaves = []; particles = []; }; init(); // 窗口大小改变 const handleResize = () => { init(); }; window.addEventListener('resize', handleResize); // 动画循环 const render = () => { time++; ctx.fillStyle = BACKGROUND_COLOR; ctx.fillRect(0, 0, width, height); // 绘制网格背景 (增加科技感) ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)'; ctx.lineWidth = 1; const gridSize = 50; ctx.beginPath(); for (let x = 0; x < width; x += gridSize) { ctx.moveTo(x, 0); ctx.lineTo(x, height); } for (let y = 0; y < height; y += gridSize) { ctx.moveTo(0, y); ctx.lineTo(width, y); } ctx.stroke(); // 绘制 UI 文字 ctx.save(); ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; ctx.font = '14px "Courier New", monospace'; // 左上角数据 ctx.fillText(`PHASE: ${phase}`, 30, 40); ctx.fillText(`COUNT: ${sperms.length}`, 30, 60); ctx.fillText(`TIME: ${(time / 60).toFixed(2)}s`, 30, 80); // 标签 ctx.font = 'bold 24px sans-serif'; if (egg) { ctx.fillStyle = 'rgba(251, 113, 133, 0.6)'; ctx.fillText("OVUM (卵细胞)", egg.x - 60, egg.y + egg.radius + 40); } // 右下角 ctx.fillStyle = 'rgba(56, 189, 248, 0.8)'; ctx.font = '16px sans-serif'; ctx.textAlign = 'right'; ctx.fillText("HUMAN FERTILIZATION PROCESS", width - 30, height - 30); ctx.fillText("受精过程模拟", width - 30, height - 55); ctx.restore(); // 更新和绘制实体 if (egg) { egg.update(); egg.draw(ctx); } sperms.forEach(sperm => { sperm.update(egg); sperm.draw(ctx); }); shockwaves.forEach((sw, index) => { sw.update(); sw.draw(ctx); if (sw.opacity <= 0) shockwaves.splice(index, 1); }); particles.forEach((p, index) => { p.update(); p.draw(ctx); if (p.life <= 0) particles.splice(index, 1); }); // 状态重置逻辑 (循环播放) if (phase === 'SUCCESS' && time % 600 === 0) { // 大约10秒后重置 // 简单的淡出转场效果 ctx.fillStyle = 'rgba(15, 23, 42, ' + (time % 100)/100 + ')'; ctx.fillRect(0,0,width,height); setTimeout(init, 500); } animationFrameId = requestAnimationFrame(render); }; render(); return () => { window.removeEventListener('resize', handleResize); cancelAnimationFrame(animationFrameId); }; }, []); return (

); }