Probleme und Lösungen bei der Verwendung der TweenMax-Animationsbibliothek in Angular

Ich habe in letzter Zeit nichts zu tun, also bastle ich an CSS

Ich habe eine bessere Animationsbibliothek gefunden, TweenMax

Die Anwendung ist zwar etwas umständlich, aber es funktioniert wirklich.

Um TweenMax in Angular verwenden zu können, müssen Sie es zunächst über npm installieren.

1. npm install --save-dev gsap
2. npm install --save-dev @types/gsap

Dann stellen Sie vor

importiere {TweenMax} von "gsap";

Sie können es auf der Seite verwenden.

Das erste Problem, auf das ich gestoßen bin, bestand darin, dass ich wollte, dass die Animation durch Auslösen einer Schaltfläche kontinuierlich abgespielt wird. Nachdem die Animation jedoch einmal abgespielt wurde, wurde sie nicht mehr ausgelöst, unabhängig davon, wie ich auf die Schaltfläche geklickt habe.

Später habe ich den Grund gefunden. Bei wiederholter Auslösung muss die Position geändert werden. Wenn beispielsweise X am Anfang 500 ist, ist die Position von X nach dem Abspielen der Animation 500. Bei wiederholter Auslösung ist die Position immer noch 500, sodass es nicht funktioniert. Wenn Sie also wiederholt auslösen möchten, müssen Sie die Position ändern.

dieser.test = neuer TweenMax('.box',3,{
   x:diese.Richtung?0:500,
   Leichtigkeit: Bounce.easeOut
  })

Das zweite Problem besteht darin, dass ich auf der Seite den Status und den Text der blauen Schaltfläche während und nach der Animation ändern möchte, dies jedoch nicht direkt mithilfe der an die Schaltfläche gebundenen Eigenschaften tun kann.

<button [deaktiviert]="wirdBewegt" style="margin-top: 10px;" nz-button nzType="primary" (klicken)="wiederholen()">
  {{beschreiben}}
</button>

dieser.test = neuer TweenMax('.box',3,{
   x:diese.Richtung?0:500,
   Leichtigkeit: Bounce.easeOut,
   beimStart:Funktion(){
    this.describle = 'In Bewegung'
    dies.isMoveing ​​​​= true
   },
   beiAbgeschlossen:Funktion(){
    this.describle = "Verschieben"
    this.isMoveing ​​​​= false
   }
  })

Nach einigem Ärger fand ich heraus, dass es tatsächlich das Problem war, auf das dieses

Wie in der obigen Abbildung zu sehen ist, verweist dies in der TweenMax-Methode auf die Tween-Methode selbst, und das Objekt, das wir ändern müssen, befindet sich in der Komponente, wie in der folgenden Abbildung gezeigt

Sobald das Problem lokalisiert ist, ist die Lösung relativ einfach. Definieren Sie einfach ein Element außerhalb des Funktionsumfangs, um auf das richtige this zu verweisen.

lass _dies = dies
dieser.test = neuer TweenMax('.box',3,{
   x:diese.Richtung?0:500,
   Leichtigkeit: Bounce.easeOut,
   beimStart:Funktion(){
    _this.describle = 'In Bewegung'
    _this.isMoveing ​​​​= wahr
   },
   beiAbgeschlossen:Funktion(){
    _this.describle = "Verschieben"
    _this.isMoveing ​​​​= falsch
   }
  })

Das ist normal.

Zusammenfassen

Dies ist das Ende dieses Artikels zur Verwendung der TweenMax-Animationsbibliothek in Angular. Weitere Informationen zur Verwendung von TweenMax in Angular finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!