用数学建模与SVG变换实现三连杆机械臂抓取动画：基于余弦定理和atan2解算关节角θ₁、θ₂，通过层级结构与rotate变换驱动连杆运动，JavaScript逐帧插值更新角度并支持夹爪开合与缓动轨迹。
用 SVG 实现机械手臂抓取的物理轨迹动画，核心不是模拟真实物理引擎，而是用数学建模 + SVG 变换 + animateTransform 或 JavaScript 控制路径点，让关节运动看起来符合连杆机构规律（如逆向运动学简化版）。关键在于：**把机械臂拆成旋转关节 + 固定长度连杆，用三角函数实时计算末端位置和各关节角度，再驱动 SVG 元素变换。**
1. 建立简化的二维三连杆模型
假设机械臂由基座、大臂、小臂、夹爪组成（共 3 个主动旋转关节），所有运动限制在 XY 平面，忽略重力与加速度——这是 SVG 动画可行的前提。
- 设定固定参数：大臂长 L1、小臂长 L2、夹爪偏移 L3
- 目标点 (x, y) 是抓取位置（需在工作空间内，即满足
x² + y² ≤ (L1+L2+L3)²） - 用余弦定理反解两个主要关节角：
θ₂ = arccos[(x² + y² − L1² − L2²) / (2·L1·L2)]
θ₁ = atan2(y,x) − atan2(L2·sin(θ₂), L1 + L2·cos(θ₂))
2. 用 SVG
每个连杆用 <line></line> 表示，以 <g></g> 包裹并设置 transform="origin" 为旋转中心，方便用 rotate(angle, cx, cy) 驱动：
<g id="base">
<line x1="0" y1="0" x2="0" y2="-80" stroke="#333" stroke-width="8"/>
<g id="arm1" transform="rotate(0,0,0)">
<line x1="0" y1="0" x2="0" y2="-120" stroke="#4a90e2" stroke-width="10"/>
<g id="arm2" transform="rotate(0,0,-120)">
<line x1="0" y1="0" x2="0" y2="-90" stroke="#50e3c2" stroke-width="8"/>
<circle cx="0" cy="-90" r="12" fill="#ff6b6b"/>
</g>
</g>
</g>
注意：每个子 <g></g> 的旋转中心要设为其父连杆末端，这样才能实现级联转动。
立即学习“前端免费学习笔记（深入）”；
3. 用 JavaScript 逐帧更新关节角度
不依赖 CSS 动画库，直接操作 transform 属性，保证角度计算与视觉同步：
- 定义目标路径数组，例如
const path = [{x:150,y:80}, {x:180,y:20}, {x:120,y:-40}] - 用
requestAnimationFrame插值过渡：对每一对相邻点，按时间步长线性插值x,y，再实时重算 θ₁、θ₂ - 调用
el.setAttribute('transform', `rotate(${deg1} 0 0)`)和`rotate(${deg2} 0 -120)`
夹爪开合可额外控制一个 <g></g> 的 scale 或 rotate（比如用两个对称 <line></line> 绕端点旋转 ±15°）。
4. 添加轨迹线与缓动效果增强真实感
末端执行器移动路径可用 <polyline></polyline> 动态追加坐标点，或预先绘制贝塞尔曲线作为参考轨迹；动画本身加入 cubic-bezier(.3,1.2,.7,1) 类缓动（CSS transition on transform 或 JS easing 函数），避免匀速转动带来的机械感。
不复杂但容易忽略：所有坐标需统一 SVG 坐标系（Y 轴向下），三角函数输出的角度单位是弧度，要转成角度传给 rotate；同时注意 atan2 参数顺序是 atan2(y, x)。
