本文主要介绍了angular使用TweenMax的相关问题及解决方法。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。

最近没事干，就是瞎摆弄CSS。

我发现了一个不错的动画库，TweenMax。

用起来有点麻烦，但是效果真的还可以。

首先，要在angular中使用TweenMax，你得通过npm安装。

1.npm安装-保存-开发gsap

2.npm安装-保存-开发@类型/gsap

然后介绍。

从“gsap”导入{ tween max }；

您可以在页面中使用它。

遇到的第一个问题是你想通过按钮触发让动画连续播放。

但动画再次播放后，不会触发任何按钮。

找到原因后，需要在反复触发时改变它的位置。比如一开始X是500，动画播出后X的位置是500。反复触发后，仓位还是500，就不行了。所以如果要反复触发，就要修改它的位置。

this.test=new TweenMax(。方框，3，{

徐：这个。方向？0:500,

放松：弹跳.放松

})

第二个问题是，在页面上，我想在动画期间和之后改变蓝色按钮的状态和文本，结果发现使用绑定到按钮的属性无法直接完成。

button[disabled]= is moving style= margin-top:10px；nz-button nzType=primary (点击)=repeat()

{ {可描述}}

/按钮

this.test=new TweenMax(。方框，3，{

徐：这个。方向？0:500,

ease:Bounce.easeOut

onStart:function(){

This.describle= in motion

this.isMoveing=true

},

onComplete:function(){

This.describle= move

this.isMoveing=false

}

})

经过一番折腾，发现其实就是这个指出的问题。

从上图可以看出，在TweenMax方法中，这指向了TweenMax方法本身，我们需要改变的对象在组件中，如下图所示。

问题一旦定位，解决起来就比较容易了。只需在函数范围之外定义一个元素来指向正确的this。

让这个=这个

this.test=new TweenMax(。方框，3，{

徐：这个。方向？0:500,

ease:Bounce.easeOut

onStart:function(){

_ this.describe=动态

_this.isMoveing=true

},

onComplete:function(){

_ this.describe= move

_this.isMoveing=false

}

})

这很正常。

总结

关于angular使用TweenMax动画库的这篇文章到此为止。有关angular使用TweenMax的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！