基于SVG与JavaScript实现曲柄运动的连杆动画计算公式咨询

机构基础参数（从你提供的SVG示例提取） #

• 曲柄旋转中心坐标：(800, 300)
• 曲柄长度r：100px（Crank组件两个铰接点的间距）
• 连杆长度L：500px（ConRod组件两个铰接点的间距）
• 曲柄角速度ω：2π/3 rad/s（3秒旋转一圈）
• 十字头运动轨迹：水平线y=300，仅x方向平移

核心计算公式 #

设当前曲柄旋转角度为θ，θ = ω * t，t为动画开始后经过的秒数，取值范围[0,3)为一个完整周期。

1. 十字头/连杆左端x坐标 #

连杆左端和十字头铰接，x坐标计算公式如下，结果和你示例中animate标签的values完全匹配：

x = 800 - r * cosθ - √(L² - (r * sinθ)²)

验证：当θ=60°时，计算得x≈257.56，和你示例中第四个values值257.557一致。

2. 连杆旋转角度 #

连杆需要绕左端铰接点旋转的角度α（单位为角度），结果和你示例中animateTransform标签的values完全匹配：

α = - arcsin( (r * sinθ) / L ) * 180 / π

验证：当θ=60°时，计算得α≈-9.97°，和你示例中第四个角度值-9.974一致。

实现思路 #

方案1：预生成动画values（和示例实现逻辑一致） #

• 将3秒的周期均匀拆分为N个时间点（你示例中为19个点，对应每20°一个采样点）
• 逐个时间点计算对应的x和α值，按示例格式拼接为values字符串
• 直接赋值给ConRod对应的animate和animateTransform标签即可

方案2：JavaScript实时驱动（更灵活） #

• 用requestAnimationFrame创建动画循环，每帧获取当前时间t，对3取模得到周期内时间
• 按上述公式计算当前帧的x和α
• 直接更新ConRod的x属性和transform属性即可，无需提前预生成大量采样值

内容的提问来源于stack exchange，提问作者sonia maklouf