Composer不支持路径跟随动画，因其仅基于CSS transform线性插值，无法生成曲线轨迹；需借助PHP配置+GSAP motionPath等外部方案实现，且须注意SVG单位、指令兼容性与transform-origin冲突。
Composer 本身不支持路径跟随动画——它不是动画引擎，也没有内置的曲线运动系统。 所有“零件沿复杂曲线运动”的效果，必须靠外部逻辑驱动（比如 PHP 脚本生成关键帧数据），再交由前端（如 Canvas、SVG 或 Three.js）渲染；或者换用真正支持路径动画的工具链（如 GSAP + SVG getPointAtLength、Blender 骨骼约束、或 Unity 的 PathInterpolator）。
为什么 Composer 的 timeline 和 transform 动画无法实现真·曲线跟随
Composer 的动画系统基于 CSS transform 的线性插值（translate/rotate），仅支持起始/结束两点间的直线位移和角度变化。即使你用贝塞尔缓动函数（如 cubic-bezier(0.42,0,0.58,1)），也只是控制「时间进度」的快慢，而非物体在空间中的轨迹形状。
- 试图用多个
transform: translate()关键帧拼出曲线，实际是折线逼近，且关键帧数量一多就失控 - Composer 导出的 JSON 动画数据不含路径定义字段（如
path: "M0,0 C50,100 150,100 200,0"），无法被下游解析为运动轨迹 - 所有「沿路径旋转对齐」（如小车轮子朝向切线方向）需手动计算导数或采样点差分，Composer 完全不提供此类几何运算能力
可行替代方案：用 PHP + SVG + GSAP 快速搭建路径跟随
如果你坚持用 Composer 作为内容组织/配置管理工具（比如存曲线参数、零件 ID、速度配置），但把动画交给前端执行，这是目前最务实的进阶路径：
- 在 Composer 中定义一个 JSON 配置片段：
{"part_id": "wheel-1", "path": "M100,200 C150,100 250,100 300,200", "duration": 3, "auto_rotate": true} - PHP 后端读取该配置，原样透传给前端 HTML 页面（不要尝试在 PHP 里“渲染动画帧”）
- 前端用 GSAP 的
motionPath插件加载该 SVG 路径：gsap.to("#wheel-1", { duration: 3, motionPath: { path: "M100,200 C150,100 250,100 300,200", align: "self", autoRotate: true } }); - 注意：GSAP v3+ 需显式注册插件
gsap.registerPlugin(MotionPathPlugin)，否则motionPath报错Invalid property motionPath
容易被忽略的三个硬伤点
即使走通了上述方案，以下细节仍会直接导致动画卡顿、错位或旋转翻转：
- SVG 路径的
viewBox和容器尺寸不匹配时，getPointAtLength()返回坐标会偏移——务必统一用px单位，避免%或em - 曲线中含
A（椭圆弧）指令时，GSAPmotionPath兼容性差，建议预处理为C或S指令（可用 svg-curve-compute 库转换） - 零件元素若设置了
transform-origin，会与motionPath的自动旋转冲突——必须清空或设为center，否则出现诡异自转
真正复杂的路径动画，从来不是靠一个工具“点几下”就能完成的。核心永远是：谁负责路径几何计算，谁负责时间采样，谁负责 DOM 更新。Composer 在这个链条里，只适合当个配置记事本。
