```javascript 'use client'; import React, { useState, useEffect, useMemo } from 'react'; // 视图常量 const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2 - 20; // 几何常量 (勾股数 3-4-5 的倍数) const A = 120; // 短边 const B = 160; // 长边 const C = 200; // 斜边 const BOX_SIZE = A + B; // 280 // 动画阶段定义 const PHASES = { INIT: 0, SHOW_C: 1, TRANSITION: 2, SHOW_AB: 3, FORMULA: 4, }; export const PythagoreanTheoremView = () => { const [phase, setPhase] = useState(PHASES.INIT); const [layout, setLayout] = useState('c-square'); // 'c-square' | 'ab-squares' // 自动播放逻辑 useEffect(() => { let timer; const runSequence = async () => { // 阶段 0: 初始展示 setPhase(PHASES.INIT); setLayout('c-square'); await wait(1500); // 阶段 1: 高亮 C^2 setPhase(PHASES.SHOW_C); await wait(2500); // 阶段 2: 移动三角形 (State Change) setPhase(PHASES.TRANSITION); setLayout('ab-squares'); await wait(2000); // 等待移动完成 // 阶段 3: 高亮 A^2 + B^2 setPhase(PHASES.SHOW_AB); await wait(2500); // 阶段 4: 总结公式 setPhase(PHASES.FORMULA); await wait(3000); // 循环 runSequence(); }; runSequence(); return () => clearTimeout(timer); }, []); const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // 三角形配置 // 基础形状：直角在 (0,0)，短边 A 在 Y 轴，长边 B 在 X 轴 // Path: M 0 0 L 160 0 L 0 120 Z const triangleData = [ { id: 1, color: '#38bdf8' }, { id: 2, color: '#38bdf8' }, { id: 3, color: '#38bdf8' }, { id: 4, color: '#38bdf8' }, ]; // 计算变换属性 const getTransform = (id, currentLayout) => { if (currentLayout === 'c-square') { // 围成中间倾斜的 C^2 switch (id) { case 1: return `translate(0, 0) rotate(0)`; case 2: return `translate(${BOX_SIZE}, 0) rotate(90)`; case 3: return `translate(${BOX_SIZE}, ${BOX_SIZE}) rotate(180)`; case 4: return `translate(0, ${BOX_SIZE}) rotate(270)`; default: return ''; } } else { // 露出左上 A^2 和右下 B^2 switch (id) { case 1: return `translate(${A}, 0) rotate(0)`; // T1 右移 case 2: return `translate(${A}, ${A}) rotate(90)`; // T2 移入内部 case 3: return `translate(${BOX_SIZE}, ${A}) rotate(180)`; // T3 上移 case 4: return `translate(0, ${BOX_SIZE}) rotate(270)`; // T4 不变 default: return ''; } } }; // 文字说明 const getLabel = () => { switch (phase) { case PHASES.INIT: return "勾股定理可视化证明"; case PHASES.SHOW_C: return "中间空白面积 = c²"; case PHASES.TRANSITION: return "重新排列三角形..."; case PHASES.SHOW_AB: return "空白面积 = a² + b²"; case PHASES.FORMULA: return "结论: a² + b² = c²"; default: return ""; } }; // 背景网格 const Grid = () => ( {Array.from({ length: 20 }).map((_, i) => ( ))} ); return ( ); }; ```