import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Play, Pause, RotateCcw, Maximize2, Calculator } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; const CYL_RADIUS = 70; const CYL_HEIGHT = 180; const PERSPECTIVE = 0.3; // 椭圆扁平度 const ANIMATION_DURATION = 12000; // 12秒完整演示 export default function CylinderSurfaceArea() { // 动画核心状态 const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); // 这里的 timeRef 存储当前动画进度毫秒数 (0 ~ ANIMATION_DURATION) const timeRef = useRef(0); const requestRef = useRef(null); const lastTimeRef = useRef(null); // 用于强制渲染的 state，不参与逻辑计算 const [, setTick] = useState(0); // 动画主循环 const animate = useCallback((timestamp) => { if (lastTimeRef.current === null) { lastTimeRef.current = timestamp; } const deltaTime = timestamp - lastTimeRef.current; lastTimeRef.current = timestamp; if (isPlaying) { timeRef.current += deltaTime; if (timeRef.current >= ANIMATION_DURATION) { timeRef.current = ANIMATION_DURATION; setIsPlaying(false); setIsFinished(true); } // 触发重绘 setTick(prev => prev + 1); } requestRef.current = requestAnimationFrame(animate); }, [isPlaying]); useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); // 控制函数 const togglePlay = () => { if (isFinished) { timeRef.current = 0; setIsFinished(false); } setIsPlaying(!isPlaying); lastTimeRef.current = null; // 重置上一帧时间防止跳跃 }; const reset = () => { timeRef.current = 0; setIsPlaying(false); setIsFinished(false); setTick(0); }; const handleScrub = (e) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const ratio = Math.max(0, Math.min(1, x / rect.width)); timeRef.current = ratio * ANIMATION_DURATION; if (timeRef.current < ANIMATION_DURATION) setIsFinished(false); setTick(t => t + 1); }; // --- 计算动画参数 --- // 将时间映射到各个阶段 (0-1) const t = timeRef.current; // 阶段1: 介绍 (0ms - 1500ms) - 静止展示 // 阶段2: 分离底面 (1500ms - 3500ms) const separationProgress = Math.min(1, Math.max(0, (t - 1500) / 2000)); const easeSep = 1 - Math.pow(1 - separationProgress, 3); // Ease out cubic // 阶段3: 展开侧面 &底面变平 (3500ms - 6500ms) const unrollProgress = Math.min(1, Math.max(0, (t - 3500) / 3000)); const easeUnroll = unrollProgress < 0.5 ? 2 * unrollProgress * unrollProgress : 1 - Math.pow(-2 * unrollProgress + 2, 2) / 2; // Ease in-out quadratic // 阶段4: 显示尺寸标注 (6500ms - 8500ms) const dimensionOpacity = Math.min(1, Math.max(0, (t - 6500) / 1000)); // 阶段5: 推导公式 (8500ms - 12000ms) const formulaOpacity = Math.min(1, Math.max(0, (t - 8500) / 1000)); // --- 几何计算 --- const currentGap = easeSep * 100; // 上下底面分离距离 // 侧面展开逻辑 const startWidth = CYL_RADIUS * 2; const endWidth = 2 * Math.PI * CYL_RADIUS; const currentWidth = startWidth + (endWidth - startWidth) * easeUnroll; // 侧面上下边缘的曲率 (展开时从椭圆弧度变为0) const startCurveY = CYL_RADIUS * PERSPECTIVE; const currentCurveY = startCurveY * (1 - easeUnroll); // 底面圆的变形 (从扁平椭圆变为正圆) const currentLidScaleY = PERSPECTIVE + (1 - PERSPECTIVE) * easeUnroll; // 底面圆的旋转 (模拟翻转到平面) // 实际上在2D投影中，我们将椭圆变圆，并移动位置 const lidOffsetX = (endWidth / 2 - CYL_RADIUS) * easeUnroll; // 展开后圆心对齐矩形边缘的偏移? 不，通常展开图圆在上下方 // 让我们采用标准展开图：圆在矩形上下方中间 // 初始位置 x=0 (中心). 展开时矩形变宽，圆保持在中心（或跟随某条边，这里保持中心对称比较美观） // 颜色定义 const colors = { bg: '#0f172a', primary: '#3b82f6', // blue-500 accent: '#06b6d4', // cyan-500 lid: '#10b981', // emerald-500 text: '#e2e8f0', // slate-200 muted: '#475569', // slate-600 grid: '#1e293b', // slate-800 highlight: '#fbbf24' // amber-400 }; // 生成网格背景 const gridLines = useMemo(() => { const lines = []; for (let i = 0; i <= WIDTH; i += 50) { lines.push(); } for (let i = 0; i <= HEIGHT; i += 50) { lines.push(); } return lines; }, []); return (

{/* 顶部控制栏 */}

圆柱表面积推导

{/* 进度条容器 */}

e.buttons === 1 && handleScrub(e)} >

); }