import React, { useState, useEffect, useMemo, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; // --- Constants & Styles --- const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = "#0f172a"; // Deep slate background const TEXT_COLOR = "#f8fafc"; // Slate-50 const COLOR_BIG = "#38bdf8"; // Sky blue const COLOR_SMALL = "#fb923c"; // Orange const COLOR_DIFF = "#ef4444"; // Red const COLOR_AUX = "#64748b"; // Slate-500 const STROKE_WIDTH = 6; const FONT_FAMILY = '"Roboto", "Arial", sans-serif'; // --- Helper Components --- // A scalable curly brace const CurlyBrace = ({ x1, y1, x2, y2, label, direction = 'right', color = TEXT_COLOR }) => { const height = Math.abs(y2 - y1); const width = Math.abs(x2 - x1); const q = 0.6; // curviness let path = ''; let tx = 0, ty = 0; // Text position if (direction === 'right') { // Vertical brace pointing right const midY = (y1 + y2) / 2; const bracketWidth = 20; path = `M ${x1} ${y1} Q ${x1 + bracketWidth*q} ${y1} ${x1 + bracketWidth} ${y1 + height * 0.1} L ${x1 + bracketWidth} ${midY - height * 0.1} Q ${x1 + bracketWidth} ${midY} ${x1 + bracketWidth * 1.8} ${midY} Q ${x1 + bracketWidth} ${midY} ${x1 + bracketWidth} ${midY + height * 0.1} L ${x1 + bracketWidth} ${y2 - height * 0.1} Q ${x1 + bracketWidth} ${y2} ${x1} ${y2}`; tx = x1 + 50; ty = midY + 8; } else if (direction === 'top') { // Horizontal brace pointing up const midX = (x1 + x2) / 2; const bracketHeight = 20; path = `M ${x1} ${y1} Q ${x1} ${y1 - bracketHeight*q} ${x1 + width*0.1} ${y1 - bracketHeight} L ${midX - width*0.1} ${y1 - bracketHeight} Q ${midX} ${y1 - bracketHeight} ${midX} ${y1 - bracketHeight * 1.8} Q ${midX} ${y1 - bracketHeight} ${midX + width*0.1} ${y1 - bracketHeight} L ${x2 - width*0.1} ${y1 - bracketHeight} Q ${x2} ${y1 - bracketHeight*q} ${x2} ${y1}`; tx = midX; ty = y1 - 40; } return ( {label && ( {label} )} ); }; // A hand-drawn style line bar const Bar = ({ x, y, width, color, label, dashed = false, delay = 0 }) => { return ( {label && ( {label} )} ); }; // --- Main Animation Component --- export default function MathAnimation() { // Global timing state // 0-9: Stage 1 (Sum-Diff) // 10-19: Stage 2 (Sum-Mult) // 20-29: Stage 3 (Diff-Mult) const [step, setStep] = useState(0); // Constants for layout const startX = 300; const startY = 250; const bigLen = 400; const smallLen = 240; // For Sum-Diff const unitLen = 100; // For Multiples // Sequence Controller useEffect(() => { let mounted = true; let timer = null; const sequence = async () => { const wait = (ms) => new Promise(resolve => { timer = setTimeout(resolve, ms); }); // --- STAGE 1: Sum-Difference --- if (!mounted) return; setStep(1); // Draw Lines await wait(2000); if (!mounted) return; setStep(2); // Show Brackets (Sum/Diff) await wait(2000); if (!mounted) return; setStep(3); // Animation: Add phantom diff await wait(2500); if (!mounted) return; setStep(4); // Show Formula 1 await wait(4000); // Read time if (!mounted) return; setStep(5); // Show Formula 2 await wait(4000); // Read time // --- STAGE 2: Sum-Multiple --- if (!mounted) return; setStep(10); // Clear & Setup await wait(1000); if (!mounted) return; setStep(11); // Draw 1 part (small) await wait(1000); if (!mounted) return; setStep(12); // Draw 3 parts (big) await wait(1500); if (!mounted) return; setStep(13); // Show Sum Bracket await wait(1500); if (!mounted) return; setStep(14); // Highlight Parts await wait(2000); if (!mounted) return; setStep(15); // Formula await wait(5000); // --- STAGE 3: Diff-Multiple --- if (!mounted) return; setStep(20); // Clear & Setup await wait(1000); if (!mounted) return; setStep(21); // Draw parts again await wait(1500); if (!mounted) return; setStep(22); // Show Diff Bracket await wait(1500); if (!mounted) return; setStep(23); // Highlight Diff Parts await wait(2000); if (!mounted) return; setStep(24); // Formula await wait(5000); // End or Loop? Just stop as per "3 chapters" implication, but keeping state stable. }; sequence(); return () => { mounted = false; if (timer) clearTimeout(timer); }; }, []); // --- Render Helpers --- // Title rendering const renderTitle = () => { let title = ""; let sub = ""; if (step < 10) { title = "第一章：和差问题"; sub = "已知两个数的和与差，求这两个数"; } else if (step < 20) { title = "第二章：和倍问题"; sub = "已知两个数的和与倍数关系，求这两个数"; } else { title = "第三章：差倍问题"; sub = "已知两个数的差与倍数关系，求这两个数"; } return ( {title} {sub} ); }; // --- Stage 1 Content --- const renderStage1 = () => { if (step < 1 || step >= 10) return null; const diffLen = bigLen - smallLen; return ( {/* Lines */} {/* Sum Bracket */} {step >= 2 && ( )} {/* Diff Indication */} {step >= 2 && ( <> {/* Dashed line extension on small bar to show where big bar ends */} {/* Vertical dashed lines dropping down */} {/* Diff Bracket on top of the overhang */} )} {/* Animation: Add Diff to Small to make it equal to Big */} {step >= 3 && ( {/* The "Ghost" Difference block added to the small number */} + 补上差 )} {/* Formulas */} {step >= 4 && ( ( 和 + 差 ) ÷ 2 = 大数 )} {step >= 5 && ( ( 和 - 差 ) ÷ 2 = 小数 )} ); }; // --- Stage 2 Content --- const renderStage2 = () => { if (step < 10 || step >= 20) return null; // Layout: Small on top this time? Or Stick to Small Top, Big Bottom? // Prompt says: "First draw short segment (1x), then below draw 3 segments (3x)" const rowGap = 60; return ( {/* Small Bar (1 unit) */} {step >= 11 && ( 1倍 )} {/* Big Bar (3 units) */} {step >= 12 && ( {/* Dividers */} {[1, 2].map(i => ( ))} 3倍 )} {/* Sum Bracket */} {step >= 13 && ( )} {/* Highlight Total Parts */} {step >= 14 && ( 总份数 = 1 + 3 = 4 )} {/* Formula */} {step >= 15 && ( 和 ÷ ( 1 + 倍数 ) = 小数 (1倍量) 小数 × 倍数 = 大数 )} ); }; // --- Stage 3 Content --- const renderStage3 = () => { if (step < 20) return null; const rowGap = 60; return ( {/* Re-draw base visual quickly */} {step >= 21 && ( {/* Small */} 1倍 {/* Big */} {[1, 2].map(i => ( ))} )} {/* Diff Bracket */} {step >= 22 && ( )} {/* Highlight Diff Parts */} {step >= 23 && ( {/* Highlight the extra 2 blocks */} 多出的份数 = 3 - 1 = 2 )} {/* Formula */} {step >= 24 && ( 差 ÷ ( 倍数 - 1 ) = 小数小数 × 倍数 = 大数 )} ); }; return (

); }