Javascript 无效的Bezier属性集。。。到丢失的插件?gsap.registerPlugin()

Javascript 无效的Bezier属性集。。。到丢失的插件?gsap.registerPlugin(),javascript,jquery,bezier,gsap,Javascript,Jquery,Bezier,Gsap,我正在尝试用GSAP3Tweenlite和bezier做一些基本的动画 但我得到的只是: 无效的Bezier属性设置为{Curvity:2,autoRotate:true,Value:Array(1)}缺少插件?gsap.registerPlugin() 这是我的代码: <img class="paper-plane" src="fusee.png" alt=""> <script src="https://code.jquer

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

无效的Bezier属性设置为{Curvity:2,autoRotate:true,Value: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
                        })
                    )

常量飞行路径={
曲线度:2,
自动旋转:对,
值:[{x:100,y:-20}],
};
常数tween=新的时间线();
吐温(
到('纸平面',1{
贝塞尔:flightPath,
ease:Power1.easInOut
})
)

有几个问题:

  • 您正在加载GSAP3(很好!),它已经相当现代化了。大多数代码是完全向后兼容的,但是BezierPlugin是一个例外,正如迁移指南中所解释的:-现在应该使用MotionPathPlugin。它的功能更强大,使用更方便
  • 您错误地将其输入为“Bezier”(不应大写),但同样,Bezier在GSAP3中无效。使用MotionPathPlugin
  • “值”数组中只有一个点。为什么?
  • 您使用的是旧语法,这是可以的,但我强烈建议更新为更短、更直观的GSAP3语法。它全部简化为一个“gsap”对象(不再有TweenLite、TweenMax、TimelineLite和TimelineMax)。您的代码可以缩短一点。ease现在也基于字符串(更短)。我想你会很喜欢新的语法的 它可能看起来像:

    
    gsap.registerPlugin(MotionPathPlugin);
    常量tween=gsap.timeline();
    到(“.纸飞机”{
    持续时间:1,
    轻松:“power1.inOut”,
    运动路径:{
    路径:[{x:100,y:-20}],//您可能需要更多的点……或者只使用SVG!
    曲线度:2,
    自动旋转:正确
    }
    });
    
    不要忘记加载和注册MotionPathPlugin

    涵盖所有变更的GSAP 3发行说明:


    如果您仍然需要一些帮助,我强烈建议您在的GreenSock论坛上发布,并提供一个简化的测试用例(可能在codepen中)。我们很乐意帮忙

    今天早些时候我也有同样的问题!!!您好谢谢您的帮助我真的很感激,我在youtube上看了一个教程,他在使用旧版本,我知道这是一个语法问题,因为新版本,我迷路了,因为这是我第一次使用GSAP,我做动画的时间有限谢谢您的帮助我会花时间阅读文档。