import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Utilities // ----------------------------------------------------------------------------- const WIDTH = 1000; const HEIGHT = 600; const BACKGROUND_COLOR = '#0f172a'; const PRIMARY_COLOR = '#06b6d4'; // Cyan-500 const SECONDARY_COLOR = '#8b5cf6'; // Violet-500 const ACCENT_COLOR = '#f59e0b'; // Amber-500 const TEXT_COLOR = '#e2e8f0'; // Slate-200 // Easing function for smooth animation const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const PerimeterExplainer = () => { // Animation State // We use a single state object to trigger renders, but calculate logic in RAF const [animState, setAnimState] = useState({ phase: 'square', // square, rectangle, circle progress: 0, // 0 to 1 within the current phase globalT: 0, // continuous time }); const requestRef = useRef(); const startTimeRef = useRef(); // --------------------------------------------------------------------------- // Animation Loop // --------------------------------------------------------------------------- useEffect(() => { const animate = (time) => { if (startTimeRef.current === undefined) { startTimeRef.current = time; } const elapsed = time - startTimeRef.current; // Cycle duration in ms const PHASE_DURATION = 5000; const TOTAL_CYCLE = PHASE_DURATION * 3; const loopTime = elapsed % TOTAL_CYCLE; let phase = 'square'; let localTime = 0; if (loopTime < PHASE_DURATION) { phase = 'square'; localTime = loopTime; } else if (loopTime < PHASE_DURATION * 2) { phase = 'rectangle'; localTime = loopTime - PHASE_DURATION; } else { phase = 'circle'; localTime = loopTime - PHASE_DURATION * 2; } // Normalize progress 0.0 -> 1.0 const progress = Math.min(localTime / PHASE_DURATION, 1); setAnimState({ phase, progress, globalT: elapsed / 1000, }); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // --------------------------------------------------------------------------- // Render Logic helpers // --------------------------------------------------------------------------- // Calculate visual elements based on current phase and progress const renderData = useMemo(() => { const { phase, progress } = animState; const cx = WIDTH / 2; const cy = HEIGHT / 2 - 50; // Shift up slightly to leave room for unrolled line // Animation Stages within a phase: // 0.0 - 0.2: Draw/Appear // 0.2 - 0.3: Pause/Highlight // 0.3 - 0.7: Unroll/Transform // 0.7 - 0.9: Measure/Hold // 0.9 - 1.0: Fade out let t_unroll = 0; if (progress > 0.3 && progress <= 0.7) { t_unroll = easeInOutCubic((progress - 0.3) / 0.4); } else if (progress > 0.7) { t_unroll = 1; } const opacity = progress > 0.9 ? 1 - (progress - 0.9) * 10 : Math.min(progress * 5, 1); // Geometry Definitions let segments = []; let totalPerimeter = 0; let label = ""; let formula = ""; let ghostShape = null; // The faint outline of the original shape if (phase === 'square') { const side = 160; totalPerimeter = side * 4; label = "正方形 (Square)"; formula = `Perimeter = 边长 (a) × 4`; // 4 sides: Top, Right, Bottom, Left // Start Coords (Closed Square) const p1 = { x: cx - side/2, y: cy - side/2 }; // Top-Left const p2 = { x: cx + side/2, y: cy - side/2 }; // Top-Right const p3 = { x: cx + side/2, y: cy + side/2 }; // Bottom-Right const p4 = { x: cx - side/2, y: cy + side/2 }; // Bottom-Left // End Coords (Unrolled Line at y = 450) const startX = cx - totalPerimeter / 2; const yLine = 480; // Define start/end for each segment const segs = [ { start: {x: p1.x, y: p1.y, x2: p2.x, y2: p2.y}, end: {x: startX, y: yLine, x2: startX + side, y2: yLine}, color: PRIMARY_COLOR, name: 'a' }, { start: {x: p2.x, y: p2.y, x2: p3.x, y2: p3.y}, end: {x: startX + side, y: yLine, x2: startX + side*2, y2: yLine}, color: SECONDARY_COLOR, name: 'a' }, { start: {x: p3.x, y: p3.y, x2: p4.x, y2: p4.y}, end: {x: startX + side*2, y: yLine, x2: startX + side*3, y2: yLine}, color: PRIMARY_COLOR, name: 'a' }, { start: {x: p4.x, y: p4.y, x2: p1.x, y2: p1.y}, end: {x: startX + side*3, y: yLine, x2: startX + side*4, y2: yLine}, color: SECONDARY_COLOR, name: 'a' }, ]; segments = segs.map(s => ({ x1: s.start.x + (s.end.x - s.start.x) * t_unroll, y1: s.start.y + (s.end.y - s.start.y) * t_unroll, x2: s.start.x2 + (s.end.x2 - s.start.x2) * t_unroll, y2: s.start.y2 + (s.end.y2 - s.start.y2) * t_unroll, color: s.color, name: s.name })); ghostShape = ; } else if (phase === 'rectangle') { const w = 240; const h = 120; totalPerimeter = (w + h) * 2; label = "长方形 (Rectangle)"; formula = `Perimeter = (长 + 宽) × 2`; const p1 = { x: cx - w/2, y: cy - h/2 }; const p2 = { x: cx + w/2, y: cy - h/2 }; const p3 = { x: cx + w/2, y: cy + h/2 }; const p4 = { x: cx - w/2, y: cy + h/2 }; const startX = cx - totalPerimeter / 2; const yLine = 480; const segs = [ { start: {x: p1.x, y: p1.y, x2: p2.x, y2: p2.y}, end: {x: startX, y: yLine, x2: startX + w, y2: yLine}, color: PRIMARY_COLOR, name: 'w' }, // Top { start: {x: p2.x, y: p2.y, x2: p3.x, y2: p3.y}, end: {x: startX + w, y: yLine, x2: startX + w + h, y2: yLine}, color: ACCENT_COLOR, name: 'h' }, // Right { start: {x: p3.x, y: p3.y, x2: p4.x, y2: p4.y}, end: {x: startX + w + h, y: yLine, x2: startX + w*2 + h, y2: yLine}, color: PRIMARY_COLOR, name: 'w' }, // Bottom { start: {x: p4.x, y: p4.y, x2: p1.x, y2: p1.y}, end: {x: startX + w*2 + h, y: yLine, x2: startX + w*2 + h*2, y2: yLine}, color: ACCENT_COLOR, name: 'h' }, // Left ]; segments = segs.map(s => ({ x1: s.start.x + (s.end.x - s.start.x) * t_unroll, y1: s.start.y + (s.end.y - s.start.y) * t_unroll, x2: s.start.x2 + (s.end.x2 - s.start.x2) * t_unroll, y2: s.start.y2 + (s.end.y2 - s.start.y2) * t_unroll, color: s.color, name: s.name })); ghostShape = ; } else if (phase === 'circle') { const r = 100; totalPerimeter = 2 * Math.PI * r; label = "圆形 (Circle)"; formula = `Perimeter = π × 直径 (d)`; ghostShape = ; // Circle unrolling logic: // We simulate the circle "peeling" open. // The arc length decreases on the circle, and increases on the line. const startX = cx - totalPerimeter / 2; const yLine = 480; // The unrolled line segment segments.push({ x1: startX, y1: yLine, x2: startX + totalPerimeter * t_unroll, y2: yLine, color: ACCENT_COLOR, name: 'C' }); // The remaining circle arc // We need to draw an arc that gets shorter. // Full circle is 0 to 2PI. // Remaining part is 2PI * (1 - t_unroll). if (t_unroll < 1) { // We rotate the start point so it looks like it's peeling from the bottom const startAngle = -Math.PI / 2 + (2 * Math.PI * t_unroll); const endAngle = 1.5 * Math.PI; // Bottom // SVG Arc path is complex, let's approximate or calculate d // Large arc flag logic... // Actually, simpler visual: Just use strokeDashoffset on a circle // But we want it to physically connect to the line if possible. // Let's stick to the strokeDasharray trick for the circle part, it's smoother. // We handle the circle specially in the render return below using this flag segments.circleProps = { cx, cy, r, circumference: totalPerimeter, dashOffset: totalPerimeter * t_unroll, rotation: -90 + (360 * t_unroll) // Rotate the circle as it unrolls }; } } return { segments, totalPerimeter, label, formula, ghostShape, opacity, t_unroll, cx, cy }; }, [animState]); // --------------------------------------------------------------------------- // Sub-Components (Memoized for performance) // --------------------------------------------------------------------------- const Grid = useMemo(() => { return ( {Array.from({ length: 21 }).map((_, i) => { const pos = i * 50; return ( ); })} ); }, []); return ( ); };