```javascript 'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 - 科技感配色 const COLORS = { bg: '#0f172a', // 背景色 primary: '#38bdf8', // 主梯形颜色 (天蓝) secondary: '#a78bfa', // 复制梯形颜色 (紫) accent: '#facc15', // 强调色 (黄) text: '#e2e8f0', // 文本颜色 grid: '#1e293b', // 网格线 dim: '#475569', // 暗淡色 }; export default function TrapezoidAreaProof() { const [step, setStep] = useState(0); // 动画状态机 // 0: 初始展示 (Show original) // 1: 复制梯形 (Clone appears) // 2: 旋转拼接 (Rotate and snap) // 3: 标注底边 (Highlight base) // 4: 公式推导 (Show formula) // 5: 结束/重置 (Reset) useEffect(() => { let timer; const next = (ms, nextStep) => { timer = setTimeout(() => setStep(nextStep), ms); }; switch (step) { case 0: // 初始展示 2秒 next(2000, 1); break; case 1: // 复制出现 1.5秒 next(1500, 2); break; case 2: // 旋转 2秒 next(2000, 3); break; case 3: // 标注 2秒 next(2500, 4); break; case 4: // 公式 5秒 next(6000, 5); break; case 5: // 重置 next(500, 0); break; default: break; } return () => clearTimeout(timer); }, [step]); // 梯形参数 const topWidth = 160; // 上底 a const bottomWidth = 260; // 下底 b const height = 140; // 高 h // 梯形路径点 (相对于中心 0,0) // 这是一个等腰梯形，方便计算 const p1 = { x: -topWidth / 2, y: -height / 2 }; // 左上 const p2 = { x: topWidth / 2, y: -height / 2 }; // 右上 const p3 = { x: bottomWidth / 2, y: height / 2 }; // 右下 const p4 = { x: -bottomWidth / 2, y: height / 2 };// 左下 const trapezoidPath = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y} L ${p3.x} ${p3.y} L ${p4.x} ${p4.y} Z`; // 旋转中心点：右腰的中点 // 右腰是 p2 到 p3 const pivotX = (p2.x + p3.x) / 2; const pivotY = (p2.y + p3.y) / 2; // 动态样式 const getCloneStyle = () => { const baseStyle = { transition: 'all 1.5s cubic-bezier(0.4, 0, 0.2, 1)', transformOrigin: `${pivotX}px ${pivotY}px`, opacity: step >= 1 ? 0.8 : 0, }; if (step >= 2) { return { ...baseStyle, transform: 'rotate(180deg)', }; } return { ...baseStyle, transform: 'rotate(0deg)', }; }; return (

); } ```