```jsx 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const PADDING = 60; const GRAPH_HEIGHT = VIEW_HEIGHT - PADDING * 2; const GRAPH_WIDTH = VIEW_WIDTH - PADDING * 2; // 辅助函数：生成高斯随机数 const randomNormal = (mean = 0, dev = 1) => { let u = 0, v = 0; while(u === 0) u = Math.random(); while(v === 0) v = Math.random(); return mean + dev * Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); } // 阶段定义 const PHASES = [ { id: 'excitement', label: '兴奋期 (Excitement)', startPct: 0, endPct: 0.35, color: '#38bdf8', bpmStart: 70, bpmEnd: 110 }, { id: 'plateau', label: '平台期 (Plateau)', startPct: 0.35, endPct: 0.65, color: '#fbbf24', bpmStart: 110, bpmEnd: 130 }, { id: 'orgasm', label: '高潮期 (Orgasm)', startPct: 0.65, endPct: 0.75, color: '#f43f5e', bpmStart: 130, bpmEnd: 180 }, { id: 'resolution', label: '消退期 (Resolution)', startPct: 0.75, endPct: 1.0, color: '#94a3b8', bpmStart: 180, bpmEnd: 70 }, ]; export default function MaleResponseCycle() { // 动画状态 const [progress, setProgress] = useState(0); // 0 to 1 const [isPlaying, setIsPlaying] = useState(false); // 粒子系统 (用于高潮期特效) const [particles, setParticles] = useState([]); // 引用 const requestRef = useRef(); const startTimeRef = useRef(); const DURATION = 12000; // 整个周期 12秒 // 生成曲线数据 const dataPoints = useMemo(() => { const points = []; const steps = 1000; for (let i = 0; i <= steps; i++) { const t = i / steps; // 0 to 1 let intensity = 0; if (t < 0.35) { // 兴奋期: 缓慢上升 (Ease In) const localT = t / 0.35; intensity = 0.1 + (0.6 * (localT * localT)); } else if (t < 0.65) { // 平台期: 高位波动 const localT = (t - 0.35) / 0.30; // 基础高度 + 小幅正弦波动模拟紧张感 intensity = 0.7 + (0.1 * localT) + (Math.sin(localT * 20) * 0.02); } else if (t < 0.75) { // 高潮期: 尖峰与律动 const localT = (t - 0.65) / 0.10; if (localT < 0.3) { // 极速冲顶 intensity = 0.8 + (localT / 0.3) * 0.2; } else { // 律动收缩 (Sawtooth waves) const pulse = Math.sin((localT - 0.3) * 30) * 0.05; intensity = 1.0 - ((localT - 0.3) * 0.1) + pulse; } } else { // 消退期: 指数下降 + 不应期 const localT = (t - 0.75) / 0.25; // 快速下降然后平缓 intensity = 0.9 * Math.exp(-localT * 8); } // 映射到 SVG 坐标 (Y轴翻转) const x = PADDING + t * GRAPH_WIDTH; const y = (VIEW_HEIGHT - PADDING) - (intensity * GRAPH_HEIGHT); points.push({ x, y, t, intensity }); } return points; }, []); // 生成 SVG Path 字符串 const pathD = useMemo(() => { if (dataPoints.length === 0) return ''; return dataPoints.reduce((acc, p, i) => { return i === 0 ? `M ${p.x} ${p.y}` : `${acc} L ${p.x} ${p.y}`; }, ''); }, [dataPoints]); // 动画循环 const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; let newProgress = elapsed / DURATION; if (newProgress >= 1) { newProgress = 0; // 循环播放 startTimeRef.current = time; setParticles([]); // 清空粒子 } setProgress(newProgress); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { setIsPlaying(true); requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 计算当前状态 const currentIndex = Math.min(Math.floor(progress * (dataPoints.length - 1)), dataPoints.length - 1); const currentPoint = dataPoints[currentIndex] || { x: PADDING, y: VIEW_HEIGHT - PADDING, intensity: 0 }; const currentPhase = PHASES.find(p => progress >= p.startPct && progress < p.endPct) || PHASES[3]; // 模拟心率计算 const phaseProgress = (progress - currentPhase.startPct) / (currentPhase.endPct - currentPhase.startPct); const currentBPM = Math.floor(currentPhase.bpmStart + (currentPhase.bpmEnd - currentPhase.bpmStart) * phaseProgress); // 粒子生成逻辑 (仅在高潮期) useEffect(() => { if (currentPhase.id === 'orgasm') { // 每帧尝试添加粒子 if (Math.random() > 0.3) { setParticles(prev => [ ...prev.slice(-40), // 限制数量 { id: Math.random(), x: currentPoint.x, y: currentPoint.y, vx: (Math.random() - 0.5) * 10, vy: (Math.random() - 0.5) * 10, life: 1.0, color: currentPhase.color } ]); } } else if (particles.length > 0) { // 慢慢消失 setParticles(prev => prev.map(p => ({...p, life: p.life - 0.1})).filter(p => p.life > 0)); } }, [progress, currentPhase.id, currentPoint.x, currentPoint.y]); // 渐变定义 const gradientId = "lineGradient"; return (

); } ```