'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 动画组件：动滑轮组机械原理展示 export const PulleySystemAnimation = () => { const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; const ACCENT_COLOR = '#06b6d4'; // Cyan const SECONDARY_COLOR = '#8b5cf6'; // Purple const ROPE_COLOR = '#e2e8f0'; const TEXT_COLOR = '#94a3b8'; // 动画状态 const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(null); // 物理常量 const PULLEY_RADIUS = 35; const TOP_Y = 100; // 定滑轮组中心Y const GROUND_Y = 550; const MAX_EXTENSION = 300; // 重物最大下降距离 const CYCLE_DURATION = 8000; // 完整周期 8秒 // 动画循环 const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // 循环播放 const progress = (elapsed % CYCLE_DURATION) / CYCLE_DURATION; setTime(progress); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 计算当前物理状态 const physicsState = useMemo(() => { // 使用正弦波模拟平滑的抬起和放下过程 // 0 -> 0.5 (抬起), 0.5 -> 1.0 (放下) // 映射到 0 ~ 1 之间的 eased value const rawPhase = time < 0.5 ? time * 2 : (1 - time) * 2; // Ease-in-out cubic const eased = rawPhase < 0.5 ? 4 * rawPhase * rawPhase * rawPhase : 1 - Math.pow(-2 * rawPhase + 2, 3) / 2; // 当前重物距离顶部的高度偏移 (0 = 最高点, 1 = 最低点) // 我们希望 eased=0 时在低处，eased=1 时在高处 // 修正：eased 0->1 代表抬起过程 const liftRatio = eased; const currentLoadY = TOP_Y + 150 + (1 - liftRatio) * MAX_EXTENSION; // 绳子拉出的长度 (假设滑轮组 n=4) // 重物上升 h，绳子拉出 4h const ropePulledLength = liftRatio * MAX_EXTENSION * 4; // 轮子旋转角度 (弧度) = 线位移 / 半径 // 定滑轮线速度快，动滑轮相对速度... 为了视觉效果，统一旋转 const rotation = (ropePulledLength / PULLEY_RADIUS) * (180 / Math.PI); // 计算速度用于仪表盘展示 (简单差分) const velocity = Math.sin(time * Math.PI * 2) * 10; // 模拟速度读数 return { liftRatio, currentLoadY, rotation, ropePulledLength, velocity: Math.abs(velocity).toFixed(1) }; }, [time]); const { currentLoadY, rotation, ropePulledLength, velocity, liftRatio } = physicsState; // 组件：滑轮 const PulleyWheel = ({ cx, cy, r, rot, type }: { cx: number, cy: number, r: number, rot: number, type: 'fixed' | 'movable' }) => ( {/* 轮毂阴影 */} {/* 内部装饰 - 科技感辐条 */} {/* 辐条 */} {[0, 60, 120, 180, 240, 300].map(angle => ( ))} {/* 边缘高光 */} ); // 组件：绳索路径 // 结构：定滑轮组(双轮)在 (400, 100)，动滑轮组(双轮)在 (400, currentLoadY) // 为了看清，我们将轮子左右错开一点 // Fixed Left: 380, Fixed Right: 420 // Movable Left: 380, Movable Right: 420 const FX_L = 380, FX_R = 420; const MV_L = 380, MV_R = 420; const R = PULLEY_RADIUS; // 绳子路径构建 // 1. 锚点在定滑轮架底部 (360, TOP_Y + R) // 2. 下行至动滑轮左 (MV_L - R) // 3. 绕过动滑轮左 // 4. 上行至定滑轮左 (FX_L - R) // 5. 绕过定滑轮左 // 6. 下行至动滑轮右 (MV_R + R) <-- 交叉穿绕方式 // 为了简化视觉避免交叉，采用顺次绕法： // Anchor (Fixed Block) -> Movable Left -> Fixed Left -> Movable Right -> Fixed Right -> Pull Out // 锚点: 定滑轮组左侧下方 const anchorX = FX_L - R + 10; const anchorY = TOP_Y + 20; // 定滑轮轴心下方 // 绳子路径 const ropePath = ` M ${anchorX} ${TOP_Y + 10} L ${anchorX} ${currentLoadY} A ${R} ${R} 0 0 0 ${MV_L + R} ${currentLoadY} L ${FX_L + R} ${TOP_Y} A ${R} ${R} 0 0 1 ${FX_L - R} ${TOP_Y} L ${MV_L - R} ${currentLoadY} A ${R+10} ${R+10} 0 0 0 ${MV_R + R} ${currentLoadY} L ${FX_R + R} ${TOP_Y} A ${R} ${R} 0 0 1 ${FX_R - R} ${TOP_Y} L ${FX_R - R} ${TOP_Y} L 600 ${TOP_Y} L 600 ${TOP_Y + 100 + ropePulledLength / 3} `; // 注意：上面的路径是简化的示意，为了视觉美观，我们使用更清晰的平行线画法 // 更清晰的平行线画法 (4段承重绳) // 锚点: 定滑轮架上 // 1. Down to Movable Left Wheel (Left side) // 2. Up to Fixed Left Wheel (Right side) // 3. Down to Movable Right Wheel (Left side) // 4. Up to Fixed Right Wheel (Right side) -> Pull out // 坐标定义 const f1_x = 360, f2_x = 440; // 定滑轮圆心 x const m1_x = 360, m2_x = 440; // 动滑轮圆心 x const f_y = TOP_Y; const m_y = currentLoadY; // 绳子绘制点 const p_start = { x: 325, y: f_y }; // 锚点在上方左侧 const ropeD = [ `M ${p_start.x} ${p_start.y}`, // Start at Fixed Block `L ${m1_x - R} ${m_y}`, // Down to Movable 1 Left `A ${R} ${R} 0 1 0 ${m1_x + R} ${m_y}`, // Around Movable 1 (Bottom) `L ${f1_x + R} ${f_y}`, // Up to Fixed 1 Right `A ${R} ${R} 0 1 1 ${f1_x - R} ${f_y}`, // Around Fixed 1 (Top) -> creates cross visual if not careful, let's keep it simple loops // 重新设计：简单的绕线逻辑，为了视觉清晰，不一定完全符合严格工程图，但符合拓扑 // 绳段1: 定(340) -> 动(340左侧) // 绳段2: 动(340右侧) -> 定(380左侧) -- 假设两个定滑轮两个动滑轮 ].join(" "); // 最终优化的视觉路径 (S型穿绕) // 4股绳子承担重量 // 1. Fixed Anchor (340, 100) -> Movable (340, Y) Left side // 2. Movable (340) Right side -> Fixed (380) Left side // 3. Fixed (380) Right side -> Movable (420) Left side // 4. Movable (420) Right side -> Fixed (460) Right side -> OUT const spacing = 40; const startX = 340; // 轮子位置 const wheels = [ { x: startX, y: m_y, type: 'movable' }, // 动1 { x: startX + spacing, y: f_y, type: 'fixed' }, // 定1 { x: startX + spacing * 2, y: m_y, type: 'movable' }, // 动2 { x: startX + spacing * 3, y: f_y, type: 'fixed' } // 定2 (输出轮) ]; // 绳子路径构建 const ropePathFinal = ` M ${startX - R} ${f_y} L ${startX - R} ${m_y} A ${R} ${R} 0 0 0 ${startX + R} ${m_y} L ${startX + spacing - R} ${f_y} A ${R} ${R} 0 0 1 ${startX + spacing + R} ${f_y} L ${startX + spacing * 2 - R} ${m_y} A ${R} ${R} 0 0 0 ${startX + spacing * 2 + R} ${m_y} L ${startX + spacing * 3 - R} ${f_y} A ${R} ${R} 0 0 1 ${startX + spacing * 3 + R} ${f_y} L ${startX + spacing * 3 + R + 100} ${f_y} L ${startX + spacing * 3 + R + 100} ${f_y + 100 + ropePulledLength * 0.25} `; return ( ); };