import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // 动画组件：百米赛跑与速度公式演示 export default function SpeedDistanceTimeAnimation() { // 画布尺寸 const WIDTH = 1200; const HEIGHT = 700; // 赛道配置 const TRACK_START_X = 100; const TRACK_END_X = 1100; const TRACK_LENGTH = TRACK_END_X - TRACK_START_X; // 1000px 代表 100m const TRACK_Y_START = 300; const LANE_HEIGHT = 80; // 状态定义 const [phase, setPhase] = useState('idle'); // idle, countdown, running, finished, analysis const [countdown, setCountdown] = useState(3); const [runners, setRunners] = useState([]); const [elapsedTime, setElapsedTime] = useState(0); const [winnerId, setWinnerId] = useState(null); const [showFormula, setShowFormula] = useState(false); // 引用保持 const requestRef = useRef(); const startTimeRef = useRef(0); const previousTimeRef = useRef(0); const runnersRef = useRef([]); // 用于物理计算，避免频繁setState依赖 // 初始化运动员数据 const initialRunners = useMemo(() => [ { id: 0, name: '路人A', color: '#3b82f6', baseSpeed: 0.18, wobble: 0.02, lane: 0 }, { id: 1, name: '小柯', color: '#ef4444', baseSpeed: 0.24, wobble: 0.01, lane: 1 }, // 小柯最快 { id: 2, name: '路人B', color: '#10b981', baseSpeed: 0.15, wobble: 0.03, lane: 2 }, ], []); // 重置/初始化函数 const initRace = useCallback(() => { const startData = initialRunners.map(r => ({ ...r, x: 0, // 相对起点的距离 (0-1000) finished: false, finishTime: 0, legFrame: 0, })); setRunners(startData); runnersRef.current = JSON.parse(JSON.stringify(startData)); // 深拷贝用于物理引擎 setElapsedTime(0); setWinnerId(null); setShowFormula(false); setPhase('idle'); setCountdown(3); }, [initialRunners]); // 启动倒计时 const startCountdown = () => { if (phase !== 'idle') return; setPhase('countdown'); let count = 3; const interval = setInterval(() => { count--; setCountdown(count); if (count <= 0) { clearInterval(interval); setPhase('running'); startTimeRef.current = performance.now(); previousTimeRef.current = performance.now(); // 启动 RAF 循环 requestRef.current = requestAnimationFrame(animate); } }, 1000); }; // 动画主循环 const animate = (time) => { if (previousTimeRef.current === undefined) previousTimeRef.current = time; const deltaTime = time - previousTimeRef.current; previousTimeRef.current = time; // 真正的比赛时间 (秒) const raceTime = (time - startTimeRef.current) / 1000; let allFinished = true; let currentWinner = null; // 更新物理状态 runnersRef.current = runnersRef.current.map(runner => { if (runner.finished) return runner; allFinished = false; // 模拟速度波动：基础速度 + 随机波动 // 注意：这里简单模拟，实际上小柯的速度要显著快 // 这里的速度单位是 px/ms const currentSpeed = runner.baseSpeed + Math.sin(time * 0.005) * runner.wobble; let newX = runner.x + currentSpeed * deltaTime; let finished = false; let finishTime = 0; if (newX >= TRACK_LENGTH) { newX = TRACK_LENGTH; finished = true; finishTime = raceTime; } // 腿部动画帧 const legFrame = runner.legFrame + deltaTime * 0.02; return { ...runner, x: newX, finished, finishTime, legFrame }; }); // 检查是否有获胜者（第一个冲线的） const finishedRunners = runnersRef.current.filter(r => r.finished).sort((a, b) => a.finishTime - b.finishTime); if (finishedRunners.length > 0) { currentWinner = finishedRunners[0].id; } // 更新 React 状态用于渲染 setRunners([...runnersRef.current]); setElapsedTime(raceTime); if (currentWinner !== null) setWinnerId(currentWinner); if (!allFinished) { requestRef.current = requestAnimationFrame(animate); } else { setPhase('finished'); // 比赛结束后延迟进入分析阶段 setTimeout(() => { setPhase('analysis'); setShowFormula(true); }, 1000); } }; // 初始化 useEffect(() => { initRace(); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [initRace]); // 渲染辅助函数：跑道刻度 const renderTicks = () => { const ticks = []; for (let i = 0; i <= 100; i += 10) { const x = TRACK_START_X + (i / 100) * TRACK_LENGTH; ticks.push( {i}m ); } return ticks; }; // 渲染运动员 const renderRunner = (runner) => { const posX = TRACK_START_X + runner.x; const posY = TRACK_Y_START + runner.lane * LANE_HEIGHT + LANE_HEIGHT / 2; // 简易火柴人/胶囊人 // 腿部摆动计算 const legSwing = Math.sin(runner.legFrame) * 10; const isMoving = !runner.finished && phase === 'running'; const legOffset = isMoving ? legSwing : 0; // 是否是赢家且在分析阶段 const isHighlight = phase === 'analysis' && runner.id === winnerId; return ( {/* 获胜高亮光圈 */} {isHighlight && ( )} {/* 名字标签 */} {runner.name} {/* 身体 */} {/* 后腿 */} {/* 前腿 */} {/* 躯干 */} {/* 头 */} {/* 手臂 (简单摆动) */} {/* 完赛时间标签 */} {runner.finished && ( {runner.finishTime.toFixed(2)}s )} ); }; return (

{/* 标题栏 */}

百米赛跑物理分析

探究速度(v)、路程(s)与时间(t)的关系

{/* 控制按钮 */}

{phase === 'idle' && ( )} {(phase === 'finished' || phase === 'analysis') && ( )}

); }