快捷導(dǎo)航

angular使用TweenMax動(dòng)畫(huà)庫(kù)的問(wèn)題和解決方法

更新時(shí)間：2021年03月18日 10:41:36 作者：munergs

這篇文章主要給大家介紹了關(guān)于angular使用TweenMax的相關(guān)問(wèn)題和解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近閑來(lái)無(wú)事，搗鼓搗鼓CSS

發(fā)現(xiàn)了一個(gè)比較好動(dòng)畫(huà)庫(kù)，就是TweenMax

用起來(lái)略微有點(diǎn)麻煩，但是效果確實(shí)可以。

首先在angular中使用TweenMax就得先通過(guò)npm 安裝

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

然后再引入

import {TweenMax} from "gsap";

就可以在頁(yè)面中使用了。

遇到的第一個(gè)問(wèn)題就是，想要?jiǎng)赢?huà)通過(guò)按鈕觸發(fā)來(lái)不停的播放
但是動(dòng)畫(huà)播完一遍以后，怎點(diǎn)按鈕都不會(huì)觸發(fā)

后面找到了原因，需要在反復(fù)觸發(fā)的時(shí)候，改變其位置才行，比如說(shuō)一開(kāi)始的X為500，動(dòng)畫(huà)播完后X的位置就是500了，再反復(fù)觸發(fā)，位置還是500所以不會(huì)有作用，所以想要反復(fù)觸發(fā)，就得修改其位置

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

第二個(gè)問(wèn)題就是，在頁(yè)面上，想要在動(dòng)畫(huà)過(guò)程中和結(jié)束以后改變藍(lán)色按鈕的狀態(tài)和文字，結(jié)果發(fā)現(xiàn)直接用綁定在按鈕上的屬性不能夠完成這個(gè)操作

<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 = '運(yùn)動(dòng)中'
    this.isMoveing = true
   },
   onComplete:function(){
    this.describle = '動(dòng)'
    this.isMoveing = false
   }
  })

通過(guò)一番折騰發(fā)覺(jué)，其實(shí)是this指向的問(wèn)題

上圖可以看到，在TweenMax方法中，this指向的是Tween這個(gè)方法本身，而我們需要改變的對(duì)象，是處在組件中的，也就是下圖所示

定位到了問(wèn)題所在處，那解決起來(lái)就比較簡(jiǎn)單了，在函數(shù)作用域之外的地方定義一個(gè)元素指向正確的this就行

let _this = this
this.test = new TweenMax('.box',3,{
   x:this.direction?0:500,
   ease:Bounce.easeOut,
   onStart:function(){
    _this.describle = '運(yùn)動(dòng)中'
    _this.isMoveing = true
   },
   onComplete:function(){
    _this.describle = '動(dòng)'
    _this.isMoveing = false
   }
  })

這樣就正常了。

總結(jié)

到此這篇關(guān)于angular使用TweenMax動(dòng)畫(huà)庫(kù)的文章就介紹到這了,更多相關(guān)angular使用TweenMax內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！