AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策

最近何もすることがないのでCSSをいじっています

より良いアニメーションライブラリTweenMaxを見つけました

使い方が少し面倒ですが、本当に効果があります。

まず、AngularでTweenMaxを使用するには、まずnpm経由でインストールする必要があります。

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

次に紹介する

"gsap" から {TweenMax} をインポートします。

ページ内で使用できます。

最初に遭遇した問題は、ボタンをトリガーしてアニメーションを連続的に再生したかったのですが、アニメーションが一度再生された後は、ボタンをクリックしてもトリガーされないということでした。

後で理由が分かりました。繰り返しトリガーする場合は、位置を変更する必要があります。たとえば、最初に X が 500 の場合、アニメーションが再生された後、X の位置は 500 になります。繰り返しトリガーすると、位置は 500 のままなので、機能しません。したがって、繰り返しトリガーする場合は、位置を変更する必要があります。

this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   イーズ:バウンス.イーズアウト
  })

2 番目の問題は、ページ上で、アニメーション中およびアニメーション後に青いボタンの状態とテキストを変更したいのですが、ボタンにバインドされたプロパティを使用してこれを直接行うことができないことです。

<button [disabled]="isMoveing" style="margin-top: 10px;" nz-button nzType="primary" (click)="repeat()">
  {{記述可能}}
</ボタン>

this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   イーズ:バウンス.イーズアウト、
   onStart:関数(){
    this.describle = '動いている'
    this.isMoveing = true です
   },
   onComplete:関数(){
    this.describle = '移動'
    this.isMoveing = false
   }
  })

しばらく悩んだ後、これが実際に問題であることがわかりました

上の図からわかるように、TweenMaxメソッドでは、これはTweenメソッド自体を指しており、変更する必要があるオブジェクトはコンポーネント内にあります（下の図を参照）。

問題が特定されれば、解決は比較的簡単です。関数スコープの外側に要素を定義して、正しい this を指すようにするだけです。

_this = this とします
this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   イーズ:バウンス.イーズアウト、
   onStart:関数(){
    _this.describle = '動いている'
    _this.isMoveing = true
   },
   onComplete:関数(){
    _this.describle = '移動'
    _this.isMoveing = false
   }
  })

それは普通のことだ。

要約する

これで、Angular で TweenMax アニメーション ライブラリを使用する方法に関するこの記事は終了です。Angular で TweenMax を使用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。