GSAP使用MotionPathPlugin配置autoRotate时出现sprite过度旋转问题求助

问题核心原因出在autoRotate参数的偏移量配置错误： #

你设置的第五个参数为true，代表第四个偏移量使用弧度单位，此时你传入的90会被识别为90弧度，换算为角度约等于5157度，自然会出现严重的过度旋转问题。

解决步骤：

1. 修正偏移量数值：如果你需要的是90度的朝向偏移，对应弧度值为Math.PI / 2，替换autoRotate数组第四个参数即可，修正后配置如下：

motionPath: {
    autoRotate: ['x', 'y', 'angle', Math.PI / 2, true], // 90度对应弧度为Math.PI/2
    alignOrigin: [0.5, 0.5],
    align: values,
    path: values,
    curviness: 0,
}

2. 排查路径点位：检查你使用的values路径数组中是否存在连续重复的{x,y}坐标，这类点位会导致GSAP计算运动方向时出现异常，产生旋转跳变。
3. 匹配初始朝向：如果修正参数后仍有细微旋转误差，确认精灵的初始朝向是否与GSAP默认基准方向匹配：GSAP MotionPath默认0角度对应朝向正右，如果你绘制的精灵初始朝向为其他方向，可对应微调偏移量数值。
4. 可选优化：如果需要更高的参数可读性，可以使用对象格式配置autoRotate，避免参数顺序写错：

autoRotate: {
    xProp: "x",
    yProp: "y",
    rotationProp: "angle",
    offset: Math.PI / 2,
    useRadians: true
}

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