javascript - 无效的属性 Bezier 设置...到缺少插件？ gsap.registerPlugin()

我正在尝试用 Gsap 3 TweenLite 和 bezier 做一些基本的动画
但我得到的是:

无效的属性 Bezier 设置为 {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
                        })
                    )

最佳答案

有几个问题:

您正在加载 GSAP 3(好!)，它已经现代化了很多。大多数代码完全向后兼容，但 BezierPlugin 是一个异常(exception)，如迁移指南中所述:https://greensock.com/3-migration#motion-path - 您现在应该使用 MotionPathPlugin。它的功能更强大且易于使用。

您将其错误输入为“Bezier”(不应大写)，但同样，Bezier 在 GSAP 3 中无效。使用 MotionPathPlugin。

您的“值”数组中只有一个点。为什么？

您使用的是旧语法，这没问题，但我强烈建议更新为更短、更直观的 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/

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

关于javascript - 无效的属性 Bezier 设置...到缺少插件？ gsap.registerPlugin()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60117782/