javascript - 无效的属性贝塞尔曲线设置...缺少插件？ gsap.registerPlugin()

Question

我正在尝试使用 Gsap 3 TweenLite 和贝塞尔曲线制作一些基本动画但我得到的只是:

无效属性贝塞尔曲线设置为 {curviness: 2, autoRotate: true, values: Array(1)} 缺少插件？ gsap.registerPlugin()

这是我的代码:

            <img class="paper-plane" src="fusee.png" alt="">

            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"> 
     </script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/CSSRulePlugin.min.js"></script>

                <script>
                    const flightPath = {
                        curviness: 2,
                        autoRotate: true,
                        values: [{ x: 100, y: -20 }],
                    };

                    const tween = new TimelineLite();

                    tween.add(
                        TweenLite.to('.paper-plane', 1, {
                            Bezier: flightPath,
                            ease: Power1.easInOut
                        })
                    )

Answer 1

有几个问题:

1. 您正在加载 GSAP 3(很好!)，它已经过相当多的现代化。大多数代码完全向后兼容，但 BezierPlugin 是一个异常(exception)，如迁移指南中所述:https://greensock.com/3-migration#motion-path - 您现在应该使用 MotionPathPlugin。它的功能更加强大且易于使用。
2. 您将其错误地输入为“Bezier”(不应大写)，但同样，bezier 在 GSAP 3 中无效。请使用 MotionPathPlugin。
3. 您的“值”数组中只有一个点。为什么？
4. 您使用的是旧语法，这没有问题，但我强烈建议更新为更短、更直观的 GSAP 3 语法。它全部简化为单个“gsap”对象(不再有 TweenLite、TweenMax、TimelineLite 和 TimelineMax)。您的代码可以变得更短一些。现在缓动也是基于字符串的(更短)。我认为您会非常喜欢新语法。

它可能看起来像:

gsap.registerPlugin(MotionPathPlugin);

const tween = gsap.timeline();
tween.to(".paper-plane", {
  duration: 1,
  ease: "power1.inOut",
  motionPath: {
    path: [{x: 100, y: -20}], // you probably want more points here...or just use an SVG <path>!
    curviness: 2,
    autoRotate: true
  }
});

不要忘记加载并注册 MotionPathPlugin。

涵盖所有更改的 GSAP 3 发行说明:https://greensock.com/3-release-notes/

如果您仍然需要帮助，我强烈建议您在 GreenSock 论坛 https://greensock.com/forums 上发帖。并提供简化的测试用例(可能在 codepen 中)。我们很乐意提供帮助。