'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 const COLORS = { bg: '#0f172a', text: '#f8fafc', a: '#38bdf8', // 蓝色 b: '#fbbf24', // 金色 c: '#f472b6', // 粉色 accent: '#10b981', // 绿色 line: '#475569' }; const DistributiveLaw = () => { const [frame, setFrame] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 动画状态控制 // 0: 初始展示公式 // 1: 矩形组合展示 (a * (b + c)) // 2: 分配过程 (a 飞向 b 和 c) // 3: 拆分为两个矩形 (a*b + a*c) // 4: 减法展示 (a * (b - c)) const [phase, setPhase] = useState(0); useEffect(() => { const animate = () => { const now = Date.now(); const elapsed = (now - startTimeRef.current) / 1000; // 循环动画周期 (共 16 秒) const cycleTime = 16; const t = elapsed % cycleTime; if (t < 3) setPhase(0); else if (t < 6) setPhase(1); else if (t < 9) setPhase(2); else if (t < 12) setPhase(3); else setPhase(4); setFrame(Math.floor(elapsed * 60)); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 缓动函数 const easeInOutQuart = (x: number) => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2; // 计算当前阶段内的进度 (0-1) const getProgress = (start: number, duration: number) => { const elapsed = ((Date.now() - startTimeRef.current) / 1000) % 16; return Math.min(Math.max((elapsed - start) / duration, 0), 1); }; const p0 = getProgress(0, 3); const p1 = getProgress(3, 3); const p2 = getProgress(6, 3); const p3 = getProgress(9, 3); const p4 = getProgress(12, 4); // 坐标计算 const centerX = VIEW_WIDTH / 2; const centerY = VIEW_HEIGHT / 2; const rectH = 150; const rectW1 = 180; const rectW2 = 120; return (

); }; export default DistributiveLaw;