如何使用 GSAP 动画/停放自上而下的汽车答案

【问题标题】：How to animate/park a top down car with GSAP如何使用 GSAP 动画/停放自上而下的汽车
【发布时间】：2017-08-17 00:14:57
【问题描述】：

我只是在尝试使用 GSAP 库 TweenMax 和 TimelineMax。

我想要实现的是一个自上而下 90 度角的停车场。但我不确定需要什么样的数学才能使它看起来真实。

我有这个 Fiddle，我尝试在其中转弯，但它看起来更像是汽车在漂移。

有什么建议吗？

timeline.to(car, 2, {
            x: "-=300", y: "+=300", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        });

【问题讨论】：

标签： animation gsap

【解决方案1】：

你的小提琴没有链接。

GSAP 的 TweenMax 包含一个 Bezier 插件，它允许对象沿路径移动，这是您想要的，而不是谨慎的值，这是您所拥有的。

TweenMax.to(car, 2, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone})

Documentation

Example

【讨论】：

Fiddle 是的，我试过了，但是使用贝塞尔函数时，我无法使用自动旋转。汽车需要始终面向同一方向。我放弃了使用贝塞尔曲线，所以我可以使用 directionalRotation。
我明白你所说的漂流是什么意思。看起来你真的很亲近。事实上，问题不在于汽车始终面向相同的方向吗？如果它朝着它前进的方向稍微旋转，那么它看起来就不会打滑/漂移。当您在现实生活中停车时，方向肯定会发生变化。
是的，所以我有this fiddle，我可以自己控制方向，但动画不流畅。或者this fiddle，动画很流畅，但我无法控制汽车前进的方向。我实际上需要介于两者之间的东西。
啊哈，我明白了。所以你摆弄贝塞尔曲线非常接近。您将 autoRotate 属性放在错误的位置。此外，可能需要更多参数才能获得正确的控制权。请参阅我的更新版本jsfiddle.net/1nqk27f1/5 数组中的“0”是正常的额外度数（可以是 +/-），所以尝试一下应该可以到达那里。我不太清楚这辆车要停在哪里，我自己很难把它停好。
谢谢！我想我现在可以弄清楚了