```javascript import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Play, RotateCcw } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; // 颜色定义 const COLORS = { bg: '#0f172a', // 动画背景色 text: '#f8fafc', large: '#3b82f6', // 深蓝/亮蓝 (大数) small: '#f97316', // 橙红 (小数) aux: '#94a3b8', // 灰色辅助线 diff: '#ef4444', // 红色 (差) highlight: '#fbbf24', // 高亮 }; // 工具函数：生成花括号路径 const makeBrace = (x1, y1, x2, y2, align = 'right', depth = 20) => { const q = 0.6; const len = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); const midX = (x1 + x2) / 2; const midY = (y1 + y2) / 2; // 简单处理水平和垂直情况 if (Math.abs(y1 - y2) < 5) { // 水平 const dir = align === 'top' ? -1 : 1; return `M ${x1} ${y1} Q ${x1} ${y1 + depth * dir * q} ${midX - depth/4} ${y1 + depth * dir * 0.8} T ${midX} ${y1 + depth * dir} T ${x2 - (midX - depth/4 - x1)} ${y1 + depth * dir * q} T ${x2} ${y2}`; } else { // 垂直 const dir = align === 'left' ? -1 : 1; return `M ${x1} ${y1} Q ${x1 + depth * dir * q} ${y1} ${x1 + depth * dir * 0.8} ${midY - depth/4} T ${x1 + depth * dir} ${midY} T ${x1 + depth * dir * 0.8} ${y2 - (midY - depth/4 - y1)} T ${x2} ${y2}`; } }; const MathThinkingAnimation = () => { // 状态管理 const [scene, setScene] = useState(0); // 0:Intro, 1:SumDiff, 2:SumMult, 3:DiffMult const [step, setStep] = useState(0); // 场景内的子步骤 const [isPaused, setIsPaused] = useState(false); // 引用，用于控制动画流程 const timelineRef = useRef(null); // 延迟函数 const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // 核心动画循环 useEffect(() => { let active = true; const runSequence = async () => { if (!active) return; // --- 场景 1: 和差问题 --- setScene(1); setStep(0); // Reset await delay(1000); if (!active) return; setStep(1); // 绘制线条 await delay(2000); if (!active) return; setStep(2); // 显示括号和标注 await delay(2000); if (!active) return; setStep(3); // 演示补齐过程 await delay(2500); if (!active) return; setStep(4); // 显示公式 await delay(5000); // 停留阅读 // --- 场景 2: 和倍问题 --- if (!active) return; setScene(2); setStep(0); await delay(1000); if (!active) return; setStep(1); // 绘制倍数块 await delay(2000); if (!active) return; setStep(2); // 显示和 await delay(1500); if (!active) return; setStep(3); // 高亮份数 await delay(2000); if (!active) return; setStep(4); // 公式 await delay(5000); // --- 场景 3: 差倍问题 --- if (!active) return; setScene(3); setStep(0); await delay(1000); if (!active) return; setStep(1); // 绘制 await delay(2000); if (!active) return; setStep(2); // 显示差 await delay(1500); if (!active) return; setStep(3); // 高亮差份 await delay(2000); if (!active) return; setStep(4); // 公式 await delay(5000); // 结束 if (!active) return; setScene(4); }; runSequence(); return () => { active = false; }; }, [timelineRef]); // 仅启动一次 // 渲染辅助组件：淡入淡出文字 const FadeText = ({ show, x, y, text, fontSize = 24, color = COLORS.text, align = "middle", fontWeight = "normal" }) => ( {text} ); // 场景 1 组件：和差问题 const SceneSumDiff = () => { const startX = 300; const largeY = 250; const smallY = 350; const baseLen = 400; // 大数长度 const diffLen = 160; // 差值 const smallLen = baseLen - diffLen; // 小数长度 return ( = 0} x={WIDTH/2} y={80} text="第一章：和差问题" fontSize={36} fontWeight="bold" /> {/* 大数线段 */} = 1 ? 0 : baseLen} style={{ transition: 'stroke-dashoffset 1.5s ease-out' }} /> = 1} x={startX + 20} y={largeY - 20} text="大数" fontSize={20} color={COLORS.large} align="start"/> {/* 小数线段 */} = 1 ? 0 : smallLen} style={{ transition: 'stroke-dashoffset 1s ease-out 0.5s' }} /> = 1} x={startX + 20} y={smallY - 20} text="小数" fontSize={20} color={COLORS.small} align="start"/> {/* 辅助线：对齐 */} = 1 ? 0.5 : 0} /> {/* 差值虚线补齐 (演示用) */} = 2 ? (step === 3 ? 0.3 : 1) : 0} style={{ transition: 'opacity 0.5s' }} /> {/* 动画演示补齐效果：从上面移动下来的虚线 */} = 3 ? 1 : 0} style={{ transition: 'all 1s ease-in-out', transform: step >= 3 ? 'translateY(0)' : 'translateY(-100px)', // 简单的视觉位移模拟 opacity: step >= 3 ? 0.5 : 0 }} /> {/* 标注：差 */} = 2 ? 1 : 0, transition: 'opacity 1s' }} /> = 2} x={startX + smallLen + diffLen/2} y={smallY + 45} text="差" color={COLORS.diff} fontSize={18} /> {/* 标注：和 */} = 3 ? diffLen : 0) + 20, smallY, 'right', 20)} fill="none" stroke={COLORS.aux} strokeWidth={2} style={{ opacity: step >= 2 ? 1 : 0, transition: 'all 1s', // 注意：这里为了简化，没有动态改变path，而是通过布局遮罩或接受静态视觉 // 实际上和差问题的“和”通常指两条线的总长，这里用右侧大括号表示总和 }} /> {/* 修正和的标注位置，更加明确 */} = 2 ? 0.5 : 0} /> = 2 ? 0.5 : 0} /> = 2 ? 1 : 0} style={{ transition: 'opacity 1s' }} /> = 2} x={startX + baseLen + 95} y={(largeY + smallY)/2 + 5} text="和" fontSize={24} align="start" /> {/* 公式推导区域 */} = 4 ? 1 : 0, transition: 'opacity 1s' }}> (和 + 差) ÷ 2 = 大数 (和 - 差) ÷ 2 = 小数 {/* 动态文字说明 */} ); }; // 场景 2 组件：和倍问题 const SceneSumMult = () => { const startX = 350; const startY = 200; const blockW = 120; const blockH = 40; const gap = 10; return ( = 0} x={WIDTH/2} y={80} text="第二章：和倍问题" fontSize={36} fontWeight="bold" /> {/* 小数：1倍量 */} = 1 ? 1 : 0, transition: 'opacity 1s' }}> 1倍 (小) {/* 大数：3倍量 */} = 1 ? 1 : 0, transition: 'opacity 1s 0.5s' }}> {[0, 1, 2].map((i) => ( 1份 ))} = 1} x={blockW * 3 + gap * 2 + 20} y={blockH/2 + 8} text="3倍 (大)" align="start" color={COLORS.large} /> {/* 和的标注 */} = 2 ? 1 : 0, transition: 'opacity 1s' }} /> = 2} x={startX - 70} y={startY + 50 + blockH + 8} text="和" fontSize={24} align="end" /> {/* 总份数高亮 */} = 3 ? 1 : 0, transition: 'opacity 1s' }}> 总份数 = 1 + 3 = 4份 {/* 公式 */} = 4 ? 1 : 0, transition: 'opacity 1s' }}> 和 ÷ (1 + 倍数) = 小数小数 × 倍数 = 大数 ); }; // 场景 3 组件：差倍问题 const SceneDiffMult = () => { const startX = 350; const startY = 200; const blockW = 120; const blockH = 40; const gap = 10; return ( = 0} x={WIDTH/2} y={80} text="第三章：差倍问题" fontSize={36} fontWeight="bold" /> {/* 小数 */} = 1 ? 1 : 0, transition: 'opacity 1s' }}> 1倍 {/* 大数 */} = 1 ? 1 : 0, transition: 'opacity 1s 0.5s' }}> {[0, 1, 2].map((i) => ( 1份 ))} {/* 差的标注 */} = 2 ? 1 : 0, transition: 'opacity 1s' }}> 差 {/* 差份高亮 */} = 3 ? 1 : 0, transition: 'opacity 1s' }}> 相差份数 = 3 - 1 = 2份 {/* 公式 */} = 4 ? 1 : 0, transition: 'opacity 1s' }}> 差 ÷ (倍数 - 1) = 小数小数 × 倍数 = 大数 ); }; return (

{/* 简单的重置按钮 (开发调试用，或给用户重新开始) */} {scene === 4 && ( )}

); }; export default MathThinkingAnimation; ```