import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Calculator, RefreshCcw, Play, Pause } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; // 动画阶段定义 const PHASES = { INTRO: 0, // 初始状态：展示头 ASSUME: 1, // 假设阶段：全部长出2条腿 CALC_DIFF: 2, // 计算差异：展示当前脚数量与实际数量的差 DISTRIBUTE: 3, // 分配补足：多余的脚飞向兔子 REVEAL: 4, // 揭晓结果：变色区分鸡和兔 }; // 问题参数 const TOTAL_HEADS = 8; const TOTAL_FEET = 26; // 计算结果: 兔子 = (26 - 8*2) / 2 = 5, 鸡 = 3 // 缓动函数 const easeOutBack = (x) => { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2); }; const easeInOutCubic = (x) => { return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; }; export default function ChickenRabbitSolver() { // 核心动画状态 const [isPlaying, setIsPlaying] = useState(true); const [time, setTime] = useState(0); // 毫秒 const requestRef = useRef(); const previousTimeRef = useRef(); // 布局计算 const animals = useMemo(() => { const arr = []; const gap = 120; const startX = (WIDTH - (TOTAL_HEADS - 1) * gap) / 2; for (let i = 0; i < TOTAL_HEADS; i++) { // 前5个是兔子(逻辑上), 后3个是鸡 const isRabbit = i < 5; arr.push({ id: i, x: startX + i * gap, y: HEIGHT / 2 - 50, isRabbit }); } return arr; }, []); // 动画循环 const animate = useCallback((timestamp) => { if (previousTimeRef.current !== undefined && isPlaying) { const deltaTime = timestamp - previousTimeRef.current; setTime(prev => { const newTime = prev + deltaTime; // 循环播放，总时长 18秒 if (newTime > 18000) return 0; return newTime; }); } previousTimeRef.current = timestamp; requestRef.current = requestAnimationFrame(animate); }, [isPlaying]); useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); // 重置/暂停控制 const togglePlay = () => { setIsPlaying(!isPlaying); previousTimeRef.current = undefined; // 重置时间差计算防止跳跃 }; const reset = () => { setTime(0); setIsPlaying(true); previousTimeRef.current = undefined; }; // 根据时间计算当前状态参数 // 时间轴规划: // 0-2s: Intro // 2-4s: Assume (Legs grow) // 4-8s: Calc Diff (Text & Particles spawn) // 8-12s: Distribute (Particles fly) // 12-15s: Reveal // 15-18s: Hold const getPhaseState = (t) => { let phase = PHASES.INTRO; let progress = 0; if (t < 2000) { phase = PHASES.INTRO; progress = Math.min(1, t / 1000); } else if (t < 4000) { phase = PHASES.ASSUME; progress = Math.min(1, (t - 2000) / 1000); } else if (t < 8000) { phase = PHASES.CALC_DIFF; progress = Math.min(1, (t - 4000) / 1000); } else if (t < 12000) { phase = PHASES.DISTRIBUTE; progress = Math.min(1, (t - 8000) / 2000); } else { phase = PHASES.REVEAL; progress = Math.min(1, (t - 12000) / 1000); } return { phase, progress }; }; const { phase, progress } = getPhaseState(time); // 渲染辅助函数 const renderLegs = (animal, idx) => { // 基础2条腿 const baseLegScale = phase >= PHASES.ASSUME ? (phase === PHASES.ASSUME ? easeOutBack(progress) : 1) : 0; // 额外的2条腿 (如果是兔子) let extraLegProgress = 0; // 在分配阶段，额外的腿从下方飞上来 // 在揭晓阶段，额外的腿已经固定 // 计算补足的腿的动画 // 只有前5个是兔子 const isTargetRabbit = animal.isRabbit; return ( {/* 基础腿 (假设是鸡) */} ); }; // 渲染飞行的腿粒子 const renderFlyingLegs = () => { if (phase < PHASES.CALC_DIFF) return null; // 总共缺少 26 - 16 = 10 条腿 // 这10条腿在 CALC_DIFF 阶段生成在底部 // 在 DISTRIBUTE 阶段飞向对应的兔子 const missingLegsCount = TOTAL_FEET - (TOTAL_HEADS * 2); // 10 const particles = []; for (let i = 0; i < missingLegsCount; i++) { // 目标是哪只兔子？每只兔子分2条腿 const targetRabbitIndex = Math.floor(i / 2); const targetAnimal = animals[targetRabbitIndex]; // 起始位置 (屏幕底部中央聚集) const startX = WIDTH / 2 + (i - missingLegsCount/2) * 30; const startY = HEIGHT - 150; // 目标位置 (兔子的腿部位置) // i % 2 决定是左腿还是右腿 const isLeft = i % 2 === 0; const targetX = targetAnimal.x + (isLeft ? -25 : 25); const targetY = targetAnimal.y + 60; // 腿的长度位置 let curX, curY, opacity, rotation; if (phase === PHASES.CALC_DIFF) { // 出现阶段 const appearProgress = Math.min(1, (time - 4000) / 500); // 0.5s 出现 curX = startX; curY = startY; opacity = appearProgress; rotation = 0; } else if (phase === PHASES.DISTRIBUTE) { // 飞行阶段 // 每个粒子稍微错开一点时间飞行 const delay = i * 100; const flyTime = time - 8000 - delay; let flyProgress = 0; if (flyTime > 0) flyProgress = Math.min(1, flyTime / 1500); flyProgress = easeInOutCubic(flyProgress); curX = startX + (targetX - startX) * flyProgress; curY = startY + (targetY - startY) * flyProgress; opacity = 1; rotation = flyProgress * 360; // 飞行时旋转 } else { // 揭晓阶段 - 固定在身上 curX = targetX; curY = targetY; opacity = 1; rotation = 0; } // 如果已经到达，改变颜色为兔子的颜色 const color = (phase === PHASES.REVEAL) ? "#d946ef" : "#f59e0b"; // 橙色 -> 紫色 particles.push( {/* 腿的形状 */} {/* 如果是飞行状态，加个光晕 */} {phase === PHASES.DISTRIBUTE && ( )} ); } return particles; }; // 渲染文字面板 const renderDashboard = () => { return ( {/* 顶部标题栏 */} 鸡兔同笼可视化求解 (Assumption Method) {/* 左上角数据板 */} 总头数 (Heads): {TOTAL_HEADS} 总脚数 (Feet): {TOTAL_FEET} {/* 动态计算显示 */} {phase === PHASES.INTRO && "准备计算..."} {phase === PHASES.ASSUME && "假设全是鸡 (2脚)..."} {phase === PHASES.CALC_DIFF && "发现脚的数量缺口..."} {phase === PHASES.DISTRIBUTE && "补足兔子的脚..."} {phase === PHASES.REVEAL && "计算完成"} {/* 底部中央解释区 */} {phase === PHASES.INTRO && "问题: 8个头，26只脚，几鸡几兔？"} {phase === PHASES.ASSUME && ( 步骤1: 假设所有动物都是鸡 (每只2条腿) )} {phase === PHASES.CALC_DIFF && ( 当前脚数: 8 × 2 = 16. 缺少: 26 - 16 = 10只脚 )} {phase === PHASES.DISTRIBUTE && ( 每只兔子少算了2只脚，10 ÷ 2 = 5只兔子 )} {phase === PHASES.REVEAL && ( 结果: 5只兔子，{8-5}只鸡 )} ); }; return (

{/* 控制按钮 */}

); } const btnStyle = { background: 'transparent', border: 'none', color: '#94a3b8', cursor: 'pointer', padding: 5, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'color 0.2s' };