import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 动画周期配置 (单位: ms) const DURATION_MOVE = 4000; const DURATION_PAUSE = 3000; const DURATION_RESET = 1000; const TOTAL_CYCLE = DURATION_MOVE + DURATION_PAUSE + DURATION_RESET; // 数学参数 const TOTAL_DISTANCE = 1000; // km const SPEED_A = 90; // km/h const SPEED_B = 60; // km/h const TOTAL_SPEED = SPEED_A + SPEED_B; const MEET_TIME = TOTAL_DISTANCE / TOTAL_SPEED; // hours export const MeetingProblemAnimation = () => { // 动画驱动状态：0 ~ TOTAL_CYCLE const [animTime, setAnimTime] = useState(0); // 使用 ref 存储 RAF 句柄和起始时间 const requestRef = useRef(); const startTimeRef = useRef(null); // 初始化背景粒子，避免每帧重算 const particles = useMemo(() => { return Array.from({ length: 40 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.5 + 0.1, })); }, []); // 主循环 useEffect(() => { const animate = (time: number) => { if (startTimeRef.current === null) { startTimeRef.current = time; } const elapsed = time - startTimeRef.current; const loopTime = elapsed % TOTAL_CYCLE; setAnimTime(loopTime); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 计算当前状态 const getPhaseData = () => { let progress = 0; // 0.0 ~ 1.0 (movement) let phase = 'moving'; // moving, met, reset let labelOpacity = 1; if (animTime < DURATION_MOVE) { // 移动阶段 // 使用 easeOutQuart 让结束时稍微减速，更有质感，或者 linear 保持匀速符合数学题 // 这里为了数学直观性，使用 linear progress = animTime / DURATION_MOVE; } else if (animTime < DURATION_MOVE + DURATION_PAUSE) { // 相遇后展示结果阶段 progress = 1; phase = 'met'; } else { // 重置阶段 (Fade out/Reset) phase = 'reset'; progress = 0; const resetProgress = (animTime - DURATION_MOVE - DURATION_PAUSE) / DURATION_RESET; labelOpacity = 1 - resetProgress; } return { progress, phase, labelOpacity }; }; const { progress, phase, labelOpacity } = getPhaseData(); // 坐标计算 const startX_A = 100; const startX_B = 900; const trackWidth = startX_B - startX_A; // 根据速度比例计算相遇点 const meetRatio = SPEED_A / TOTAL_SPEED; // 90 / 150 = 0.6 const meetX = startX_A + trackWidth * meetRatio; // 当前位置 const currentX_A = startX_A + (meetX - startX_A) * progress; const currentX_B = startX_B - (startX_B - meetX) * progress; // 动态数值 const currentDistA = (SPEED_A * MEET_TIME * progress).toFixed(1); const currentDistB = (SPEED_B * MEET_TIME * progress).toFixed(1); const currentTime = (MEET_TIME * progress).toFixed(2); const remainingDist = (TOTAL_DISTANCE - (parseFloat(currentDistA) + parseFloat(currentDistB))).toFixed(0); // 颜色定义 const colorA = "#38bdf8"; // Sky Blue const colorB = "#f472b6"; // Pink const colorMeet = "#fbbf24"; // Amber const colorText = "#e2e8f0"; return ( ); };