Неверное свойство Безье установлено ... Отсутствует плагин? gsap.registerPlugin () - PullRequest
Новая
       73

Неверное свойство Безье установлено ... Отсутствует плагин? gsap.registerPlugin ()

2 голосов
/ 07 февраля 2020

Я пытаюсь сделать базовую c анимацию с помощью Gsap 3 TweenLite и безье, но все, что я получаю, это:

Недопустимое свойство Безье, установленное в {curviness: 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
                        })
                    )

1 Ответ

3 голосов
/ 08 февраля 2020

Есть несколько проблем:

  1. Вы загружаете GSAP 3 (хорошо!), Который был немного модернизирован. Большая часть кода полностью обратно совместима, но BezierPlugin является исключением, как объясняется в руководстве по миграции: https://greensock.com/3-migration#motion -path - вы должны использовать MotionPathPlugin сейчас. Это способ более способный и простой в использовании.
  2. Вы опечатали его как «Безье» (он не должен быть написан заглавными буквами), но, опять же, Безье недействителен в 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). Мы будем рады помочь.

...