如何使用 GSAP animate/park 自上而下的汽车

Question

我只是尝试使用 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
        });

Answer 1

您的 fiddle 未链接。

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

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

Documentation

Example

如何使用 GSAP animate/park 自上而下的汽车

How to animate/park a top down car with GSAP

animation

gsap