无效的属性Bezier设置为缺少插件？ gsap.registerPlugin（）

Question

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

无效的属性Bezier设置为{曲线：2，autoRotate：true，值：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是一个例外，如迁移指南中所述：https://greensock.com/3-migration#motion-path-您现在应该使用MotionPathPlugin。它更强大，更易于使用。
2. 您将其错误键入为“ Bezier”（不应大写），但是再次说明，bezier在GSAP 3中无效。请使用MotionPathPlugin。
3. 您的“值”数组中只有一个点。为什么？
4. 您正在使用可以的旧语法，但是我强烈建议您更新为更短，更直观的GSAP 3语法。所有这些都简化为单个“ gsap”对象（不再包含TweenLite，TweenMax，TimelineLite和TimelineMax）。您的代码可以缩短很多。现在，简化也基于字符串（更短）。我认为您会非常喜欢新语法。

它可能看起来像：

const tween = gsap.timeine();
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中）。我们很乐意为您提供帮助。