import React, { useState, useEffect, useRef, useMemo } from 'react'; // 动画常量定义 const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const SQUARE_SIZE = 200; // 正方形总大小 const GRID_COUNT = 5; // 5x5网格 const TILE_SIZE = SQUARE_SIZE / GRID_COUNT; // 每个格子大小 40 const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2 + 20; // 稍微下移一点留给标题 const TOP_LEFT_X = CENTER_X - SQUARE_SIZE / 2; const TOP_LEFT_Y = CENTER_Y - SQUARE_SIZE / 2; // 颜色定义 const COLORS = { bg: '#0f172a', stroke: '#38bdf8', // 浅蓝 highlight: '#facc15', // 黄色 tileStart: '#8b5cf6', // 紫色 tileEnd: '#ec4899', // 粉色 text: '#ffffff', secondaryText: '#94a3b8' }; export default function SquareMathAnim() { // 状态管理 const [phase, setPhase] = useState('idle'); // idle, intro, perimeter, area, summary const [perimeterProgress, setPerimeterProgress] = useState(0); // 0-4 (4条边) const [areaCount, setAreaCount] = useState(0); // 0-25 (格子数) const [showFormula, setShowFormula] = useState(''); // 当前显示的公式 const [mainText, setMainText] = useState('正方形的奥秘'); // 动画锁与清理 const isRunningRef = useRef(false); const timeoutsRef = useRef([]); // 辅助函数：可中断的等待 const wait = (ms: number) => { return new Promise(resolve => { const id = setTimeout(resolve, ms); timeoutsRef.current.push(id); }); }; // 核心动画循环 useEffect(() => { const runAnimation = async () => { if (isRunningRef.current) return; isRunningRef.current = true; while (true) { // 无限循环演示 // --- 重置状态 --- setPhase('idle'); setPerimeterProgress(0); setAreaCount(0); setShowFormula(''); setMainText('正方形的奥秘'); await wait(1500); // --- 阶段 1: 介绍 --- setPhase('intro'); setMainText('这是一个正方形'); await wait(1500); setMainText('它的四条边一样长'); await wait(1500); setMainText('假设边长是 5 厘米'); setShowFormula('边长 (a) = 5'); await wait(2000); // --- 阶段 2: 周长 --- setPhase('perimeter'); setMainText('什么是周长？'); await wait(1000); setMainText('周长就是绕一圈的长度'); setShowFormula('周长 = 边长 × 4'); await wait(1000); // 跑圈动画 for (let i = 1; i <= 4; i++) { setPerimeterProgress(i); // 动态显示计算过程 if (i === 1) setShowFormula('5'); if (i === 2) setShowFormula('5 + 5 = 10'); if (i === 3) setShowFormula('5 + 5 + 5 = 15'); if (i === 4) setShowFormula('5 × 4 = 20'); await wait(800); } await wait(1000); setMainText('周长是 20 厘米'); await wait(2000); // --- 阶段 3: 面积 --- setPhase('area'); setPerimeterProgress(0); // 清除周长高亮 setMainText('什么是面积？'); setShowFormula(''); await wait(1500); setMainText('面积就是它铺满的大小'); setShowFormula('面积 = 边长 × 边长'); await wait(1500); // 填充格子动画 for (let i = 1; i <= 25; i++) { setAreaCount(i); if (i === 25) { setShowFormula('5 × 5 = 25'); } else if (i % 5 === 0) { setShowFormula(`正在铺第 ${i/5} 行...`); } // 速度逐渐加快 const delay = i < 10 ? 150 : (i < 20 ? 80 : 40); await wait(delay); } setMainText('面积是 25 平方厘米'); await wait(2000); // --- 阶段 4: 总结 --- setPhase('summary'); setMainText('记住公式了吗？'); await wait(4000); } }; runAnimation(); // 清理函数 return () => { timeoutsRef.current.forEach(clearTimeout); isRunningRef.current = false; // 虽然 effect 依赖 []，但为了严谨 }; }, []); // 生成背景粒子 (只生成一次) const particles = useMemo(() => { return Array.from({ length: 30 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1, duration: Math.random() * 3 + 2, })); }, []); // 生成网格数据 const tiles = useMemo(() => { const arr = []; for (let row = 0; row < GRID_COUNT; row++) { for (let col = 0; col < GRID_COUNT; col++) { arr.push({ id: row * GRID_COUNT + col, row, col }); } } return arr; }, []); // 计算小球(Runner)的位置，用于周长动画 const getRunnerPos = () => { // 0: TopLeft, 1: TopRight, 2: BottomRight, 3: BottomLeft, 4: TopLeft (Loop) // 简单的插值可以做得更好，这里直接根据 perimeterProgress 定位到角 // perimeterProgress = 1 -> Top Edge Done -> At TopRight switch(perimeterProgress) { case 0: return { x: TOP_LEFT_X, y: TOP_LEFT_Y, visible: false }; case 1: return { x: TOP_LEFT_X + SQUARE_SIZE, y: TOP_LEFT_Y, visible: true }; // Top Right case 2: return { x: TOP_LEFT_X + SQUARE_SIZE, y: TOP_LEFT_Y + SQUARE_SIZE, visible: true }; // Bottom Right case 3: return { x: TOP_LEFT_X, y: TOP_LEFT_Y + SQUARE_SIZE, visible: true }; // Bottom Left case 4: return { x: TOP_LEFT_X, y: TOP_LEFT_Y, visible: true }; // Back to Top Left default: return { x: TOP_LEFT_X, y: TOP_LEFT_Y, visible: false }; } }; const runner = getRunnerPos(); return (

); }