'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BACKGROUND_COLOR = '#0f172a'; const PRIMARY_COLOR = '#38bdf8'; // Cyan const ACCENT_COLOR = '#f472b6'; // Pink const TEXT_COLOR = '#e2e8f0'; // Gear configurations (Teeth count) // Front is usually fixed in simple explanations, Rear changes. const FRONT_TEETH = 44; const REAR_GEARS = [ { teeth: 32, label: '1挡 (爬坡)', type: 'Torque' }, { teeth: 24, label: '2挡 (巡航)', type: 'Mixed' }, { teeth: 16, label: '3挡 (加速)', type: 'Speed' }, { teeth: 11, label: '4挡 (冲刺)', type: 'Max Speed' } ]; // Helper to create a gear SVG path const createGearPath = (cx: number, cy: number, teeth: number, radius: number, holeRadius: number) => { let path = ""; const angleStep = (Math.PI * 2) / teeth; const toothDepth = 6; for (let i = 0; i < teeth; i++) { const angle = i * angleStep; const nextAngle = (i + 1) * angleStep; // Tooth shape logic const rOut = radius; const rIn = radius - toothDepth; const x1 = cx + Math.cos(angle) * rIn; const y1 = cy + Math.sin(angle) * rIn; const x2 = cx + Math.cos(angle + angleStep * 0.25) * rOut; const y2 = cy + Math.sin(angle + angleStep * 0.25) * rOut; const x3 = cx + Math.cos(angle + angleStep * 0.75) * rOut; const y3 = cy + Math.sin(angle + angleStep * 0.75) * rOut; const x4 = cx + Math.cos(nextAngle) * rIn; const y4 = cy + Math.sin(nextAngle) * rIn; if (i === 0) path += `M ${x1} ${y1}`; path += ` L ${x2} ${y2} L ${x3} ${y3} L ${x4} ${y4}`; } // Inner circle (hole) path += ` M ${cx + holeRadius} ${cy}`; path += ` A ${holeRadius} ${holeRadius} 0 1 0 ${cx - holeRadius} ${cy}`; path += ` A ${holeRadius} ${holeRadius} 0 1 0 ${cx + holeRadius} ${cy}`; return path; }; export default function BicycleGearAnimation() { const [gearIndex, setGearIndex] = useState(0); const [rotations, setRotations] = useState({ front: 0, rear: 0 }); const requestRef = useRef(); const startTimeRef = useRef(); // Physics constants const CADENCE_RPM = 60; // Assume constant pedaling const FRONT_RADIUS = 70; // Derived state for animation interpolation const currentRearTeeth = REAR_GEARS[gearIndex].teeth; const gearRatio = FRONT_TEETH / currentRearTeeth; // Radius roughly proportional to teeth const getRearRadius = (teeth: number) => teeth * 2.5; const currentRearRadius = getRearRadius(currentRearTeeth); // Animation Loop const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const deltaTime = time - startTimeRef.current; // Calculate rotation based on time (degrees) // Front rotates at constant speed const frontSpeed = (CADENCE_RPM * 360) / 60000; // deg per ms const newFrontRot = deltaTime * frontSpeed; // Rear rotates based on accumulated ratio (simplified for visual smoothness) // In a real physics engine we'd integrate, but here we link them directly // however, since ratio changes step-wise, direct linking causes jumps. // We stick to a visual approximation: constant front, rear = front * currentRatio setRotations(prev => ({ front: newFrontRot % 360, rear: (prev.rear + (frontSpeed * gearRatio * 16)) % 360 // 16ms approx frame time multiplier })); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [gearRatio]); // Auto gear shifting useEffect(() => { const interval = setInterval(() => { setGearIndex(prev => (prev + 1) % REAR_GEARS.length); }, 4000); // Shift every 4 seconds return () => clearInterval(interval); }, []); // Chain path calculation const rearCx = 700; const rearCy = 300; const frontCx = 300; const frontCy = 300; // Derailleur position (simplified logic) // As rear gear gets smaller, derailleur arm moves back/down to pick up slack const tension = (32 - currentRearTeeth) * 1.5; const derailleurX = rearCx + 20 + tension; const derailleurY = rearCy + 120 + tension/2; // Dynamic Chain Path const chainPath = useMemo(() => { const r1 = FRONT_RADIUS; const r2 = currentRearRadius; // Top tangent line // Simplified: straight line from top of front to top of rear const topY = frontCy - r1; const rearTopY = rearCy - r2; // Bottom path goes through derailleur const bottomY = frontCy + r1; const rearBottomY = rearCy + r2; return ` M ${frontCx} ${topY} L ${rearCx} ${rearTopY} A ${r2} ${r2} 0 0 1 ${rearCx} ${rearBottomY} L ${derailleurX} ${derailleurY} L ${derailleurX - 20} ${derailleurY + 20} L ${frontCx} ${bottomY} A ${r1} ${r1} 0 0 1 ${frontCx} ${topY} `; }, [currentRearRadius, derailleurX, derailleurY]); // Speed calculation for display (km/h approximation) // Speed = Cadence * Ratio * WheelCircumference const speed = (CADENCE_RPM * gearRatio * 2.1 * 60) / 1000; return (

); }