'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 辅助函数：生成随机数 const random = (min: number, max: number) => Math.random() * (max - min) + min; // 粒子类型定义 interface Particle { id: number; x: number; y: number; size: number; speedY: number; opacity: number; phase: number; } // 信号包类型 interface SignalPacket { id: number; progress: number; // 0 to 1 direction: 'toSH' | 'toCS'; // Changsha to Shanghai or vice versa speed: number; } export const LongDistanceLoveView = () => { const [time, setTime] = useState(0); const requestRef = useRef(); // 坐标定义 (模拟地图相对位置) // 长沙 (中南大学) - 约在左下方 const csPos = { x: 350, y: 380, label: '长沙', uni: 'CSU 中南大学' }; // 上海 (上海交通大学) - 约在右上方 const shPos = { x: 720, y: 290, label: '上海', uni: 'SJTU 上海交通大学' }; // 贝塞尔曲线控制点，制造弧度 const controlPoint = { x: (csPos.x + shPos.x) / 2, y: Math.min(csPos.y, shPos.y) - 100 // 向上弯曲 }; // 状态：背景粒子（象征各自的努力与发光） const [particles, setParticles] = useState([]); // 状态：传输信号（象征思念） const [signals, setSignals] = useState([]); // 初始化粒子 useEffect(() => { const initParticles = Array.from({ length: 40 }, (_, i) => ({ id: i, x: random(0, VIEW_WIDTH), y: random(0, VIEW_HEIGHT), size: random(1, 3), speedY: random(0.2, 0.8), opacity: random(0.3, 0.7), phase: random(0, Math.PI * 2), })); setParticles(initParticles); // 初始发射一个信号 setSignals([{ id: Date.now(), progress: 0, direction: 'toSH', speed: 0.008 }]); }, []); // 动画循环 useEffect(() => { const animate = () => { setTime(prev => prev + 0.02); // 更新背景粒子 (缓缓上升，象征蒸蒸日上/努力) setParticles(prev => prev.map(p => { let newY = p.y - p.speedY; if (newY < 0) newY = VIEW_HEIGHT; return { ...p, y: newY, opacity: 0.3 + 0.4 * Math.sin(time + p.phase) // 闪烁效果 }; })); // 更新信号传输 setSignals(prev => { const nextSignals = prev.map(s => ({ ...s, progress: s.progress + s.speed })).filter(s => s.progress <= 1); // 随机发射新信号 if (Math.random() < 0.015) { nextSignals.push({ id: Date.now(), progress: 0, direction: Math.random() > 0.5 ? 'toSH' : 'toCS', speed: random(0.005, 0.01) }); } return nextSignals; }); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [time]); // 计算贝塞尔曲线上的点 const getBezierPoint = (t: number, p0: {x:number, y:number}, p1: {x:number, y:number}, p2: {x:number, y:number}) => { const oneMinusT = 1 - t; return { x: oneMinusT * oneMinusT * p0.x + 2 * oneMinusT * t * p1.x + t * t * p2.x, y: oneMinusT * oneMinusT * p0.y + 2 * oneMinusT * t * p1.y + t * t * p2.y }; }; // 生成装饰性网格 const Grid = useMemo(() => { const lines = []; for (let i = 0; i < VIEW_WIDTH; i += 50) { lines.push(); } for (let i = 0; i < VIEW_HEIGHT; i += 50) { lines.push(); } return {lines}; }, []); return ( ); };