Problems and solutions of using TweenMax animation library in angular

I have nothing to do recently, so I tinker with CSS

I found a better animation library, TweenMax

It's a little cumbersome to use, but it really works.

First, to use TweenMax in angular, you must first install it through npm

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

Then introduce

import {TweenMax} from "gsap";

You can use it in the page.

The first problem I encountered was that I wanted the animation to play continuously by triggering a button, but after the animation was played once, no matter how I clicked the button, it would not be triggered.

Later I found the reason. It is necessary to change its position when triggering repeatedly. For example, if X is 500 at the beginning, the position of X will be 500 after the animation is played. If it is triggered repeatedly, the position will still be 500, so it will not work. Therefore, if you want to trigger repeatedly, you have to change its position.

this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   ease:Bounce.easeOut
  })

The second problem is that on the page, I want to change the state and text of the blue button during and after the animation, but I find that I cannot do this directly using the properties bound to the button.

<button [disabled]="isMoveing" style="margin-top: 10px;" nz-button nzType="primary" (click)="repeat()">
  {{describle}}
</button>

this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   ease:Bounce.easeOut,
   onStart:function(){
    this.describle = 'In motion'
    this.isMoveing ​​= true
   },
   onComplete:function(){
    this.describle = 'Move'
    this.isMoveing ​​= false
   }
  })

After some trouble, I found that it was actually the problem pointed to by this

As can be seen in the figure above, in the TweenMax method, this points to the Tween method itself, and the object we need to change is in the component, as shown in the figure below

Once the problem is located, the solution is relatively simple. Just define an element outside the function scope to point to the correct this.

let _this = this
this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   ease:Bounce.easeOut,
   onStart:function(){
    _this.describle = 'In motion'
    _this.isMoveing ​​= true
   },
   onComplete:function(){
    _this.describle = 'Move'
    _this.isMoveing ​​= false
   }
  })

That's normal.

Summarize

This is the end of this article about how to use TweenMax animation library in angular. For more information about how to use TweenMax in angular, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!